Custom segments in a circle using CSS

Question

My goal is to make circular segments which looks like this.

But so far I am able to do this.

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

So how can I make those type of shapes(Blue Background shapes which holds numbers) inside a circle? . Sections width will vary according if number of sections varies.

I would recommend SVG for these kind of things instead of CSS. Have a look at chipChocolate.py's answer here - http://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side/27944020#27944020 — Harry, Jan 18 '16 at 09:13
Thanks @Harry this almost solves the problem.. But I am having problem to increase number of sections. Can u help me out? — Sam, Jan 18 '16 at 09:52
Yes, please show us the code you have tried and where you are stuck so that I can help in correcting it. — Harry, Jan 18 '16 at 15:00
I have added explanation in the linked thread for how the `path` is calculated depending on the no. of sections. Take a look and it should help you. — Harry, Jan 20 '16 at 15:27

score -1 · Answer 1 · answered Jan 18 '16 at 09:00

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

Thanks for the effort but I need the white portions to look like the picture I attached at the top which is not round shaped.. — Sam, Jan 18 '16 at 09:03

Custom segments in a circle using CSS

1 Answers1