想用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);
}
}
巨优网络网站建设为怀柔区企业提供网站建设服务，是一家从事怀柔网站建设、怀柔网站制作、怀柔网站优化公司,为怀柔区各单位提供完善的网站建设解决方案,推动怀柔网站建设服务业务的发展！怀柔做网站,怀柔做网站公司,选巨优网络！咨询热线：010-69632027