css画任意角度饼图

<div class="shanxing shanxing1">
  <div class="sx1"></div>
  <div class="sx2"></div>
</div>

.shanxing{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: yellow;
}
.sx1{
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px,100px,200px,0px); // 绘制半圆，clip属性，元素必须是absolute的 ；上右下左，右和下位置的数字是从左和从上开始显示的px数；该配置得到的是一个切去右半边的半圆*/
  border-radius: 100px;
  background-color: #f00;
  /*-webkit-animation: an1 2s infinite linear; */
}
.sx2{
    position: absolute;
    width: 200px;
    height: 200px;
    clip: rect(0px,100px,200px,0px);
    border-radius: 100px;
    background-color: #f00;
    /*-webkit-animation: an2 2s infinite linear;*/
}
// 通过两个半圆旋转，想要0-180度的扇形时，漏出的.shanxing底色即为所求；当需要180-360度扇形时，两个.shanxing1拼凑的形状即为所求
.shanxing1 .sx1{
  transform: rotate(-30deg);
}
.shanxing1 .sx2{
  transform: rotate(-150deg);
}