This can be done using CSS transforms
1) For 12 equal slices, each slice angle will be 30 degrees.
2) We need to rotate each slice according to the angle between vertical axis and start of the slice. So the first slice will be rotated by 0deg and the last by 330deg
3) Additionally we need to skew each slice by minus (90deg – slice angle) In this case, it is -(90deg – 30deg) = skewY(-60deg)
4) Regarding the text:
a) We need to unskew slice contents with skewY(60deg)
b) In order to center the text in the slice we need to rotate it by half the slice angle, hence: rotate(15deg)
.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;
transform: skewY(60deg) rotate(15deg);
padding-top: 20px;
}
li:first-child {
transform: rotate(0deg) skewY(-60deg);
}
li:nth-child(2) {
transform: rotate(30deg) skewY(-60deg);
}
li:nth-child(3) {
transform: rotate(60deg) skewY(-60deg);
}
li:nth-child(4) {
transform: rotate(90deg) skewY(-60deg);
}
li:nth-child(5) {
transform: rotate(120deg) skewY(-60deg);
}
li:nth-child(6) {
transform: rotate(150deg) skewY(-60deg);
}
li:nth-child(7) {
transform: rotate(180deg) skewY(-60deg);
}
li:nth-child(8) {
transform: rotate(210deg) skewY(-60deg);
}
li:nth-child(9) {
transform: rotate(240deg) skewY(-60deg);
}
li:nth-child(10) {
transform: rotate(270deg) skewY(-60deg);
}
li:nth-child(11) {
transform: rotate(300deg) skewY(-60deg);
}
li:nth-child(12) {
transform: rotate(330deg) 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;
}
li:nth-child(7) .text {
background: cyan;
}
li:nth-child(8) .text {
background: brown;
}
li:nth-child(9) .text {
background: gray;
}
li:nth-child(10) .text {
background: pink;
}
li:nth-child(11) .text {
background: maroon;
}
li:nth-child(12) .text {
background: gold;
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
来源：https://stackoverflow.com/questions/29006214/how-to-divide-a-circle-into-12-equal-parts-with-color-using-css3-javascript/29007874#29007874
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
