Modifying CSS to produce 6 circle sectors

Question

I found some code here: https://stackoverflow.com/a/29007874/3042018 which makes 12 circle sectors using rotate and skew CSS (e.g.transform: rotate(30deg) skewY(-60deg); ).

I want to modify the code to have 6 sectors instead of 12. I thought it should be simple. I've done my due diligence and had a good go, but I'm stumped. I deleted the last six list elements and the css rules for these, then modified the angles to what I though would give me what I want, but now there are gaps in my circle.

Can someone please explain how to have six even-sized sectors filling the whole circle, based on the existing code?

.circle {
    position: relative;
    border: 1px solid black;
    padding: 0;
    margin: 1em auto;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
}
li {
    overflow: hidden;
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 50%;
    transform-origin: 0% 100%;      
}
.text {
    position: absolute;
    left: -100%;
    width: 200%; height: 200%;
    text-align: center;
    -webkit-transform: skewY(60deg) rotate(15deg);
    -ms-transform: skewY(60deg) rotate(15deg);
    transform: skewY(60deg) rotate(15deg);
    padding-top: 20px;
}

li:first-child {
    -webkit-transform: rotate(0deg) skewY(-60deg);
    -ms-transform: rotate(0deg) skewY(-60deg);
    transform: rotate(0deg) skewY(-60deg);     
}
li:nth-child(2) {
    -webkit-transform: rotate(60deg) skewY(-60deg);
    -ms-transform: rotate(60deg) skewY(-60deg);
    transform: rotate(60deg) skewY(-60deg);     
}
li:nth-child(3) {
    -webkit-transform: rotate(120deg) skewY(-60deg);
    -ms-transform: rotate(120deg) skewY(-60deg);
    transform: rotate(120deg) skewY(-60deg);    
}
li:nth-child(4) {
    -webkit-transform: rotate(180deg) skewY(-60deg);
    -ms-transform: rotate(180deg) skewY(-60deg);
    transform: rotate(180deg) skewY(-60deg);    
}
li:nth-child(5) {
    -webkit-transform: rotate(240deg) skewY(-60deg);
    -ms-transform: rotate(240deg) skewY(-60deg);
    transform: rotate(240deg) skewY(-60deg);    
}
li:nth-child(6) {
    -webkit-transform: rotate(300deg) skewY(-60deg);
    -ms-transform: rotate(300deg) skewY(-60deg);
    transform: rotate(300deg) skewY(-60deg);    
}

li:first-child .text {
    background: green; 
}
li:nth-child(2) .text {
    background: tomato; 
}
li:nth-child(3) .text {
    background: aqua; 
}
li:nth-child(4) .text {
    background: yellow;  
}
li:nth-child(5) .text {
    background: orange;  
}
li:nth-child(6) .text {
    background: purple;  
}

<ul class="circle">
        <li>
            <div class="text">1</div>
        </li>
        <li>
            <div class="text">2</div>
        </li>
        <li>
            <div class="text">3</div>
        </li>
        <li>
            <div class="text">4</div>
        </li>
        <li>
            <div class="text">5</div>
        </li>
        <li>
            <div class="text">6</div>
        </li>
        </ul>

https://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side — Paulie_D, Nov 22 '22 at 20:07

score 3 · Answer 1 · answered Nov 22 '22 at 20:24

skewY on the li elements controls the angle of the wedge. skewY(-30deg) makes it the correct size for six wedges.

li:first-child {
  transform: rotate(0deg) skewY(-30deg);
}
li:nth-child(2) {
  transform: rotate(60deg) skewY(-30deg);
}
li:nth-child(3) {
  transform: rotate(120deg) skewY(-30deg);
}
li:nth-child(4) {
  transform: rotate(180deg) skewY(-30deg);
}
li:nth-child(5) {
  transform: rotate(240deg) skewY(-30deg);
}
li:nth-child(6) {
  transform: rotate(300deg) skewY(-30deg);
}

transform and padding-top on .text counters the container's skew and controls the orientation and position of the text. So adjust it as follows:

.text {
  transform: skewY(30deg) rotate(30deg);
  padding-top: 15px;
}

You will, of course, need to update -webkit-transform and -ms-transform as well.

you got it there just a smidge faster than I did. :-P – Paulo Santos Nov 22 '22 at 20:25 — Paulo Santos, Nov 22 '22 at 20:25

score 2 · Accepted Answer · answered Nov 22 '22 at 20:24

I just followed the instructions of the post.

.circle {
    position: relative;
    border: 1px solid black;
    padding: 0;
    margin: 1em auto;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
}
li {
    overflow: hidden;
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 50%;
    transform-origin: 0% 100%;      
}
.text {
    position: absolute;
    left: -100%;
    width: 200%; height: 200%;
    text-align: center;
    -webkit-transform: skewY(30deg) rotate(15deg);
    -ms-transform: skewY(30deg) rotate(15deg);
    transform: skewY(30deg) rotate(15deg);
    padding-top: 20px;
}

li:first-child {
    -webkit-transform: rotate(0deg) skewY(-30deg);
    -ms-transform: rotate(0deg) skewY(-30deg);
    transform: rotate(0deg) skewY(-30deg);     
}
li:nth-child(2) {
    -webkit-transform: rotate(60deg) skewY(-30deg);
    -ms-transform: rotate(60deg) skewY(-30deg);
    transform: rotate(60deg) skewY(-30deg);     
}
li:nth-child(3) {
    -webkit-transform: rotate(120deg) skewY(-30deg);
    -ms-transform: rotate(120deg) skewY(-30deg);
    transform: rotate(120deg) skewY(-30deg);    
}
li:nth-child(4) {
    -webkit-transform: rotate(180deg) skewY(-30deg);
    -ms-transform: rotate(180deg) skewY(-30deg);
    transform: rotate(180deg) skewY(-30deg);    
}
li:nth-child(5) {
    -webkit-transform: rotate(240deg) skewY(-30deg);
    -ms-transform: rotate(240deg) skewY(-30deg);
    transform: rotate(240deg) skewY(-30deg);    
}
li:nth-child(6) {
    -webkit-transform: rotate(300deg) skewY(-30deg);
    -ms-transform: rotate(300deg) skewY(-30deg);
    transform: rotate(300deg) skewY(-30deg);    
}

li:first-child .text {
    background: green; 
}
li:nth-child(2) .text {
    background: tomato; 
}
li:nth-child(3) .text {
    background: aqua; 
}
li:nth-child(4) .text {
    background: yellow;  
}
li:nth-child(5) .text {
    background: orange;  
}
li:nth-child(6) .text {
    background: purple;  
}

<ul class="circle">
  <li><div class="text">1</div></li>
  <li><div class="text">2</div></li>
  <li><div class="text">3</div></li>
  <li><div class="text">4</div></li>
  <li><div class="text">5</div></li>
  <li><div class="text">6</div></li>
</ul>

Modifying CSS to produce 6 circle sectors

2 Answers2