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%情况，所以简单的做了一个判断。

　　效果：