html框架不等分分割,只用html和css画出不等分圆盘，不用canvas(示例代码)

.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%;}

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(\'div\')

item.setAttribute(\'class\',\'item\')

item.setAttribute(\'item\',list[i])

item.setAttribute(\'style\',\'border: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)

}