修改CSS产生6个圆扇区

Question

I found some code here: https://stackoverflow.com/a/29007874/3042018 which makes 12 circle sectors using rotate and skew CSS (eg 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>