div{
display: inline-block
border:1px solid #6baabb
width:40px
height:40px
float:left
margin:0px 10px
}
a{
display: inline-block
width:40px
height:40px
background: #6baabb
}
.Round{/*圆*/
border-radius:20px
}
.LeftRound{/*左半圆*/
width:20px
border-radius:20px 0px 0px 20px
}
.RightRound{/*右半圆*/
width:20px
border-radius:0px 20px 20px 0px
}
.TopRound{/*上半圆*/
height:20px
border-radius:20px 20px 0px 0px
}
.BottomRound{/*下半圆*/
height:20px
border-radius:0px 0px 20px 20px
}
<div><a class="Round"></a></div> 全圆
<div><a class="LeftRound"></a></div> 左半圆
<div><a class="RightRound"></a></div> 右半圆
<div><a class="TopRound"></a></div> 上半圆
<div><a class="BottomRound"></a></div> 下半圆
不太明白你的意思，不过我根据我自己的理解，写了一个例子，如下图，如果是你想要的效果，就拿代码去用，如果不是，回复我一下，帮你调试！
html：
<div class="page"><div class="item"></div>
</div>
css：
.page{width: 600pxheight: 600pxborder: 2px solid #dddmargin: autoposition: relative}.item{width: 200pxheight: 200pxoverflow: hiddenposition: absoluteright: 0top: 30%}
.item:before{width: 200pxheight: 200pxbackground: #23b7e5border-radius: 100%content: ""display: blockposition: absoluteleft: 50%}
方法一：border
我们知道利用border+宽高：0 可以实现如下效果 （假设圆的半径是100px）
如果要实现扇形在此基础上圆角一下即可，同时设置某一方颜色透明即可实现”某一块扇形”的视觉效果
方法二：矩形+半圆相切
基本思路是：左边的半圆旋转与右边的矩形相切。
至于细节：
1.半圆的由来：可以rect裁剪只显示圆的左边部分
2.同理，矩形也通过rect裁剪只显示右边部分，同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分
然后剩下的完善同样三个标签旋转一定角度。
