Modifying CSS to produce 6 circle sectors - html

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>

Answer 1

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.

Answer 2

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>