这可以使用CSS转换完成
1)对于12个相等的切片,每个切片角度将为30度.
2)我们需要根据垂直轴和切片开始之间的角度旋转每个切片.因此第一个切片将旋转0度,最后一个切片旋转330度
3)此外,我们需要将每个切片倾斜减去(90度 – 切片角度)
在这种情况下,它是 – (90deg – 30deg)= skewY(-60deg)
4)关于案文:
a)我们需要用skewY(60deg)去掉切片内容
b)为了使文本在切片中居中,我们需要将切片角度旋转一半,因此:旋转(15度)
.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
注意:
IE9和Safari / iOS分别需要-ms和-webkit供应商前缀. (caniuse)
今天的文章html把圆形分成10份,如何使用css3 / javascript将圆圈分成12个相等的部分[通俗易懂]分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/88005.html