css 圆 4等份 |利用css设置背景颜色

.step1 {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid #f00;
border-bottom: 50px solid transparent;
border-left: 50px solid #f00;
border-radius: 50px;
}

以上代码实现了一个红色的正方形，接下来大家分别旋转四个正方形来实现圆4等份的效果。

.step2 {
transform: rotate(90deg);
}
.step3 {
transform: rotate(180deg);
}
.step4 {
transform: rotate(270deg);
}

将四个方形组合起来，就得到了一个圆4等份的效果：

.circle {
position: relative;
width: 100px;
height: 100px;
margin: 50px auto;
}
.circle div {
position: absolute;
left: 0;
top: 0;
}

以上代码实现了一个宽高为100px的圆形，并且四等份。如果想要调整圆形的大小和位置，可对.circle和.circle div进行相应的调整。