CSS实现任意角度扇形

　　参考之前思路：conic-gradient：圆锥形渐变存在兼容性问题，无法使用，要不然其实实现效果也蛮好的

<div class="precoss">
    <div class="skew"></div>
</div> .precoss{ width 26px height 26px border:2px solid rgba(22,143,202,1); border-radius:50%; margin-right 10px position relative overflow hidden font-size 0 .skew{ position absolute top -1px left -1px width 28px height 28px border-radius: 50%; background: conic-gradient(#168fca 0, #168fca 50%, #fff 50%, #fff 100%); } }

　　所以放弃，只能自己手写，参考第2种思路

<div class="precoss" v-if="item.progress <= 50">
  <div class="skew1"></div>
  <div  class="skew2" :style="{'transform': `rotate(${item.progress*3.6}deg)`}"></div>
</div>
<div class="precoss" v-else>
  <div class="skew1" :style="{'transform': `rotate(${(item.progress - 50)*3.6}deg)`}"></div>
  <div  class="skew2 per50"></div>
</div>

　　css如下

.precoss{ width 30px height 30px border-radius 50% background #168fca position relative margin-right 10px .skew1{ background-color: #ffffff; width: 26px; height: 26px; border-radius: 50%; clip:rect(0,13px,auto,0); position: absolute; top 2px left 2px } .skew2{ background-color: #ffffff; width: 26px; height: 26px; border-radius: 50%; clip:rect(0,auto,auto,13px); position: absolute; top 2px left 2px &.per50{ background-color: #168fca; width: 28px; height: 28px; top 1px } } }

　　因为存在超过50%情况，所以简单的做了一个判断。

　　效果：