扇形是一種常見的幾何形狀,可以用純 CSS 畫出。下面是一個簡單的例子,演示如何使用 CSS 畫一個圓形和兩個扇形。
```css
.扇形 {
position: relative;
width: 100px;
height: 80px;
.扇形:before,
.扇形:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
.扇形:after {
left: 0;
transform: rotate(45deg);
transform-origin: 0 100%;
在這個例子中,我們使用 `:before` 和 `:after` 偽元素來繪制兩個扇形。這兩個偽元素都具有 `position: absolute` 屬性,并且使用 `border-radius` 屬性將它們的圓角設置為 0 到 100% 之間的范圍。我們還使用 `transform` 屬性將它們旋轉了 45 度。
通過使用 CSS 的 `border-radius` 屬性和 `transform` 屬性,我們可以輕松地繪制出各種形狀的扇形。你可以嘗試使用不同的半徑和旋轉角度來創建不同的扇形。