用css3的clip-path画扇形、空心扇形（透明背景）

想用css能不能组合出一些好看的效果，比如空心的圆环，或者扇形之类的，那就是用强大的clip-path属性，下面就让我们来看看这个属性如何实现我们想要的效果

当扇形角度大于180度的时候，我们第二个半圆的颜色就要与第一个圆的颜色一样，来形成扩展的效果，如果扇形角度小于180度的时候，我们第二个半圆的颜色就要与背景的颜色一样，这里第二个圆的颜色为了大家好理解，用了浅蓝色和浅灰色

<div id="app">
  <div class="round round-one"></div>
  <div class="round round-two"></div>
  <div class="round round-three"></div>
</div>

.round {
  width: 200px;
  height: 200px;
  margin: 20px;
  border-radius: 50%;
  background: #00b4c8;
}
.round-one {
  clip-path: polygon(0% 0%, 25% 0%,50% 50%, 0% 25%);
}
.round-two {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 50%, 0% 25%);
}
.round-three {
  background: transparent;
  box-sizing: border-box;
  border: 30px solid #00b4c8;
  clip-path: polygon(0% 0%, 25% 0%,50% 50%, 0% 25%);
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from{
    transform: rotateZ(0deg);
  } to{
    transform: rotateZ(360deg);
  }
}