html把圆形分成10份,如何使用css3 / javascript将圆圈分成12个相等的部分

这可以使用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)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值