用css写一个圆, 并将其平分十份
时间: 2024-03-06 15:47:12 浏览: 105
可以使用CSS的伪元素和transform属性来实现一个平分十份的圆:
HTML代码:
```html
<div class="circle"></div>
```
CSS代码:
```css
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
}
.circle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform: rotate(36deg);
border-radius: inherit;
background-color: #fff;
}
.circle::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform: rotate(72deg);
border-radius: inherit;
background-color: #fff;
}
.circle div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
}
.circle div:nth-child(1) {
transform: rotate(0deg);
}
.circle div:nth-child(2) {
transform: rotate(36deg);
}
.circle div:nth-child(3) {
transform: rotate(72deg);
}
.circle div:nth-child(4) {
transform: rotate(108deg);
}
.circle div:nth-child(5) {
transform: rotate(144deg);
}
.circle div:nth-child(6) {
transform: rotate(180deg);
}
.circle div:nth-child(7) {
transform: rotate(216deg);
}
.circle div:nth-child(8) {
transform: rotate(252deg);
}
.circle div:nth-child(9) {
transform: rotate(288deg);
}
.circle div:nth-child(10) {
transform: rotate(324deg);
}
```
解释:
首先,我们使用border-radius属性设置圆的边框半径为50%,并设置其背景颜色为灰色。
然后,使用伪元素::before和::after在圆的中心位置绘制两个白色的扇形。这里使用transform属性将它们旋转36度和72度,使它们分别占据圆的1/10和2/10。
最后,使用伪元素的父元素.circle的子元素div来绘制剩下的8个扇形,并通过transform属性的rotate()方法将它们旋转到正确的位置。
这样就完成了一个平分十份的圆的绘制。
阅读全文