【发布时间】：2021-03-04 21:06:35
【问题描述】：
我想使用 CSS 制作一个圆形扇区。这些扇区将形成一个完整的圆圈。如何使用 CSS 制作它？
我找到了sample，但它是四分之一圆形扇区。我想做六个扇形来组成一个完整的圆。我怎样才能做到？
注意：我不擅长画画，但这里有一个我想要的样本......
div {
width: 50px;
height: 50px;
background-color: #ccc;
background-color: #ccc;
-moz-border-radius: 100px;
border-radius: 100px;
}
#center {
position: relative;
margin: 100px 0 0 100px;
border: solid #fff 1px;
}
#tl,#tr,#bl,#br {
position: absolute;
height: 75px;
width: 75px;
z-index: -1;
}
#tl {
border-radius: 100px 0 0 0;
-moz-border-radius: 100px 0 0 0;
top: -50px;
left: -50px;
}
#tr {
border-radius: 0 100px 0 0;
-moz-border-radius: 0 100px 0 0;
top: -50px;
left: 26px;
}
#bl {
border-radius: 0 0 0 100px;
-moz-border-radius: 0 0 0 100px;
top: 26px;
left: -50px;
}
#br {
border-radius: 0 0 100px 0;
-moz-border-radius: 0 0 100px 0;
top: 26px;
left: 26px;
}<div id="center">
<div id="tl"></div>
<div id="tr"></div>
<div id="bl"></div>
<div id="br"></div>
</div>【问题讨论】：
-
但是这个形状正是你想要的：gabri.me/demo/Coffee%20with%20CSS3%20Gradients
-
绘画技巧+1
-
这将是 SVG 的一个很好的用例。
标签： html css css-shapes