今天我們來學習一下如何使用CSS把圓平均分成6份。首先我們需要先準備一個圓形的盒子：

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
}

接下來，我們使用偽元素::before和::after來分別創(chuàng)建三個扇形：

.circle::before,
.circle::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #f00;
border-radius: 50%;
transform-origin: 0 0;
}
.circle::before {
transform: rotate(60deg);
}
.circle::after {
transform: rotate(120deg);
}

代碼中border屬性的值采用了簡寫，相當于border-width: 50px;border-style: solid;border-color: #f00;。這里我們把左邊的邊框顏色設為紅色，其余三邊設為透明的目的是為了使扇形的形狀更加真實。

到這里，我們得到了一個圓形，以及兩個扇形：

接下來，我們再用一個偽元素創(chuàng)建一個中心點，并設置為黑色，這樣圓形就完美分成了6份。

.circle::before,
.circle::after {
//...
}
.circle::before {
//...
}
.circle::after {
//...
}
.circle::before::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
transform: translate(-50%, -50%);
}

完成的代碼如下：

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
position: relative;
}
.circle::before,
.circle::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #f00;
border-radius: 50%;
transform-origin: 0 0;
}
.circle::before {
transform: rotate(60deg);
}
.circle::after {
transform: rotate(120deg);
}
.circle::before::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
transform: translate(-50%, -50%);
}

以上就是使用CSS把圓平均分成6份的過程，希望能對大家有所幫助。