css圆3等分 |纯css3小姑娘荡秋千

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
}
.circle div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transform: rotate(120deg);
clip: rect(0px, 200px, 200px, 100px);
}
.circle div:first-child {
transform: rotate(0deg);
}
.circle div:last-child {
transform: rotate(240deg);
}

以上代码中，大家首先创建一个宽高均为200px的圆形（border-radius:50%），并将其position属性设为relative，使内部的div元素可以相对于这个圆形进行定位。接着，大家创建3个元素（div），并利用CSS中的transform属性将这三个元素均匀地分布在圆形中。

通过clip属性，大家可以控制每个元素的范围，使其只显示圆形的某一部分。最终，大家得到了一个圆3等分的布局效果。