CSS 画扇形qaq

1. 画一个圆，对这个圆进行裁剪

2. 设置裁剪的第一个点是圆心 x=50%, y=50%; 第二个点是 x=0%, y=0%

3. 第三个裁剪点是 x=100%，y=0%

4. 连点成面，后面若还有裁剪点，裁剪都是基于前面点连出的轮廓

5. 逆时针翻转45度，与我们的直觉就会趋于一致

<div class="sector"></div>
<style>
.sector{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: green;
  // 第三个点x3在0-100%的变化,对应着0-90deg之间的扇形
  clip-path: polygon(50% 50%, 0% 0%, 100% 0);
  // 在其它点都不变化的情况下,第四个点y4在0-100%之间变化,对应着90-180deg之间的扇形
  // clip-path: polygon(50% 50%, 0% 0%, 100% 0,100% 10%);
  // 在其它点都不变化的情况下,第五个点x5在100-0%之间变化,对应着180-270deg之间的扇形
  // clip-path: polygon(50% 50%, 0% 0%, 100% 0,100% 100%,10% 100%);
  // 在其它点都不变化的情况下,第六个点y6在100-0%之间变化,对应着270-360deg之间的扇形
  // clip-path: polygon(50% 50%, 0% 0%, 100% 0,100% 100%,0% 100%, 0 10%);
  transform: rotate(-45deg);
}
</style>