在CSS中,我們可以使用border-radius屬性來創(chuàng)建圓形或橢圓形的元素。但是要創(chuàng)建扇形圓餅,我們需要使用更多的技巧。
一種方法是使用偽元素來創(chuàng)建半圓形,然后使用transform旋轉(zhuǎn)它們。然后,使用盒子陰影效果來給半圓形添加邊框,從而讓它們看起來像扇形。
.pie { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #ccc; } .pie::before, .pie::after { content: ""; position: absolute; width: 100px; height: 200px; border-radius: 100px 0 0 100px; transform-origin: 100% 50%; background-color: #fff; box-shadow: -2px 0 2px rgba(0,0,0,0.4); } .pie::before { transform: rotate(0deg); } .pie::after { transform: rotate(45deg); }
上面的代碼將創(chuàng)建一個寬高都為200px的圓形元素,它的背景顏色為灰色。然后,我們使用偽元素::before和::after來創(chuàng)建兩個半圓形元素。它們的寬度都為100px,高度為200px,并且使用border-radius屬性來將它們變成半圓形。
接著,我們使用transform-origin屬性將變換的原點設(shè)置為100% 50%,這樣旋轉(zhuǎn)的時候就會繞著半圓形的右端點進行旋轉(zhuǎn)。
通過為半圓形元素添加陰影效果,它們就會呈現(xiàn)出扇形的效果。現(xiàn)在,我們可以使用transform屬性來旋轉(zhuǎn)它們,從而調(diào)整扇形的角度和大小。
總結(jié)來說,創(chuàng)建扇形圓餅的關(guān)鍵在于使用偽元素來創(chuàng)建半圓形,然后使用transform來旋轉(zhuǎn)它們。然后,使用盒子陰影效果來給半圓形添加邊框,從而讓它們看起來像扇形。通過調(diào)整半圓形的角度和大小,我們可以創(chuàng)建不同大小和角度的扇形圓餅。
上一篇css 居中靠底