CSS圓4等份,即將一個(gè)圓形分成四個(gè)等份。實(shí)現(xiàn)這個(gè)效果,我們可以通過(guò)以下步驟:
.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; }
以上代碼實(shí)現(xiàn)了一個(gè)紅色的正方形,接下來(lái)我們分別旋轉(zhuǎn)四個(gè)正方形來(lái)實(shí)現(xiàn)圓4等份的效果。
.step2 { transform: rotate(90deg); } .step3 { transform: rotate(180deg); } .step4 { transform: rotate(270deg); }
將四個(gè)方形組合起來(lái),就得到了一個(gè)圓4等份的效果:
.circle { position: relative; width: 100px; height: 100px; margin: 50px auto; } .circle div { position: absolute; left: 0; top: 0; }
以上代碼實(shí)現(xiàn)了一個(gè)寬高為100px的圓形,并且四等份。如果想要調(diào)整圓形的大小和位置,可對(duì).circle和.circle div進(jìn)行相應(yīng)的調(diào)整。