使用CSS在圈子中自定义细分

时间：2016-01-18 08:49:00

标签： html css geometry css-shapes segment

我的目标是制作看似这样的圆形片段。

enter image description here

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

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

那么如何在圆圈内制作那些类型的形状（包含数字的蓝色背景形状）呢？ 。截面宽度将根据截面数量的不同而变化。

1 个答案:

答案 0 :(得分：-1)

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题