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>

Answer 1

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>