这里只是做下原理解释
原理:使用两个半圆做角度拼接。
比如想绘制一个缺口朝右,缺口弧度30度角的扇形
那么将由一个旋转65度角的半圆A+一个旋转-65度角的半圆B组合而成。
代码:
<style>
.outer{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(65deg);
clip: rect(0px,100px,200px,0px);/* 这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */
border-radius: 100px;
background-color: yellow;
/*-webkit-animation: an1 2s infinite linear;*/
}
.pie{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(-65deg);
clip: rect(0px,100px,200px,0px);
border-radius: 100px;
background-color: yellow;
/*-webkit-animation: an2 2s infinite linear;*/
}
</style>
<div