</div></body>//CSS代碼 .circle-container { width: 500px; height: 500px; position: relative; } .circle { width: 0; height: 0; border-radius: 50%; position: absolute; top: 0; left: 0; } .quarter { border-bottom: 250px solid #f00; border-right: 250px solid transparent; transform: rotate(0deg); } .half { border-bottom: 500px solid #fe0; border-right: 500px solid transparent; transform: rotate(90deg); }

首先，我們需要?jiǎng)?chuàng)建一個(gè)圓形容器，使用CSS的border-radius屬性設(shè)置容器的邊框?yàn)?0%即可。然后我們需要?jiǎng)?chuàng)建若干個(gè)用于顯示分割的圓，這里以4等分為例。我們可以將容器分為四個(gè)區(qū)域，每個(gè)區(qū)域一個(gè)圓形，由于是四等分，每個(gè)圓形的邊界是容器的正中心和相鄰邊界交點(diǎn)。分別設(shè)置每個(gè)圓形的邊框和填充顏色，使用transform屬性將其旋轉(zhuǎn)90度展現(xiàn)在對(duì)應(yīng)的位置，就可以實(shí)現(xiàn)將圓分為四等分的效果。

如果需要將圓分為其他等分?jǐn)?shù)，可以參考上述方法設(shè)置不同的邊框和旋轉(zhuǎn)角度，從而實(shí)現(xiàn)各種形狀的區(qū)域。