html - 使用CSS将自定义分割围成一圈

This question already has answers here:

How to create a circle with links on border side
                                
                                    （8个答案）
                                
                        
                                4年前关闭。
            
                    
我的目标是制作看起来像这样的圆形线段。



但是到目前为止，我能够做到这一点。

#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>
  

那么如何在圆内制作这些类型的形状（蓝色背景形状包含数字）？ 。如果部分数量不同，部分宽度也会有所不同。

最佳答案

#outer-circle {
   background: #385a94;
   border-radius: 50%;
   height: 360px;
   width: 360px;
   position: relative;
  border:5px solid blue;
   /*
    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;
  border:5px solid blue;
}

<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>

关于html - 使用CSS将自定义分割围成一圈，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34850511/