【发布时间】：2016-04-23 09:00:14
【问题描述】：
我的目标是制作看起来像这样的圆形线段。
但到目前为止，我能够做到这一点。
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.c-0-icon{
position: absolute;
content: " ";
top: 14.5%;
right: 28.5%;
width: 12%;
height: 12%;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-1-icon{
position: absolute;
content: " ";
top: 26.5%;
right: 15.5%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-2-icon{
position: absolute;
content: " ";
top: 43%;
right: 10%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-3-icon{
position: absolute;
content: " ";
bottom: 28.5%;
right: 15.5%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-4-icon{
position: absolute;
content: " ";
bottom: 15.5%;
right: 27.5%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-5-icon{
position: absolute;
content: " ";
bottom: 10%;
left: 43.5%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-6-icon{
position: absolute;
content: " ";
bottom: 15.5%;
left: 27.5%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-7-icon{
position: absolute;
content: " ";
bottom: 28.5%;
left: 15.5%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-8-icon{
position: absolute;
content: " ";
top: 43%;
left: 10%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-9-icon{
position: absolute;
content: " ";
top: 26.5%;
left: 15.5%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.M-icon{
position: absolute;
content: " ";
top: 14.5%;
left: 28.5%;
width: 40px;
height: 40px;
border-radius:50%;
font-size:27px;
font-weight:bold;
color:#351acc;
line-height:40px;
text-align:center;
background: white;
-webkit-bask-repeat: no-repeat;
}
.c-middle{
position: absolute;
content: " ";
top: 30.5%;
left: 29.5%;
width: 150px;
height: 150px;
border-radius:50%;
font-size:30px;
font-weight:bold;
color:#111212;
line-height:110px;
text-align:center;
background: green;
-webkit-bask-repeat: no-repeat;
}<div data-role = "page" id="a1" class="b1" data-enable-page-scroll="false">
<div id="c1">
<div id="outer-circle">
<div id="0" class = "c-0-icon">0</div>
<div id="1" class = "c-1-icon">1</div>
<div id="2" class = "c-2-icon">2</div>
<div id="3" class = "c-3-icon">3</div>
<div id="4" class = "c-4-icon">4</div>
<div id="5" class = "c-5-icon">5</div>
<div id="6" class = "c-6-icon">6</div>
<div id="7" class = "c-7-icon">7</div>
<div id="8" class = "c-8-icon">8</div>
<div id="9" class = "c-9-icon">9</div>
<div id="QView" class = "M-icon">M</div>
<!-- Middle Div: Selected Channel No. show -->
<div id="channelNoShow" Class = "c-middle"></div>
</div>
</div>
</div>
那么我怎样才能在一个圆圈内制作这些类型的形状（包含数字的蓝色背景形状）？ .如果部分数量不同，部分宽度会有所不同。
【问题讨论】：
-
我会推荐 SVG 而不是 CSS。在这里查看chipChocolate.py的答案 - stackoverflow.com/questions/27943053/…
-
感谢@Harry，这几乎解决了问题。但我在增加部分数量时遇到了问题。你能帮帮我吗？
-
是的，请向我们展示您尝试过的代码以及您遇到的问题，以便我帮助纠正它。
-
我在链接线程中添加了关于如何根据编号计算
path的说明。的部分。看看，它应该对你有帮助。 -
谢谢@Harry ...你太棒了..
标签： html css geometry css-shapes segment