<style>. box{height:200px;width:200px;border-radius:100%; Overflow:hidden; margin:200px; position:relative; }. tests{Border:transparent solid 100px;height:0;width:0; border-top:200px solid blue; }. item{height:0;width:0;position:absolute;left:50%;top:-50%;} </style><body><div class= "box" ></div><script> var list = [10,50,90,40,30,60,70,50], total=400,r=200,item_du=0,item_dus var box = document.queryselector ('. box '); for (var i =0;i<8;i++) {var p_b_w = R*math.tan (List[i]/total*math.pi) var item = document.createelement (' d IV ') Item.setattribute (' class ', ' Item ') Item.setattribute (' Item ', List[i]) item.setattribute (' style ', ' B Order:solid Transparent ' +p_b_w+ ' px;border-top: ' + ' solid ' + (i%2==0? ') Blue ': ' #ccc ') + ' +r+ ' px; ' + ' margin-left:-' +p_b_w+ ' px;transform-origin: ' +p_b_w+ ' px ' +r+ ' px;transform:rotate (' + item_du+ ' deg) ') Box.appendchild (iTEM) Item_du = item_du+ ((list[i]/total+list[i+1]/total) *180)}</script>
Only use HTML and CSS to draw a non-uniform disk, without canvas