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>
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.