CSS 可以透過多種方式繪製任意角度的扇形。以下列出幾種常見的方法,並解釋其優缺點:
1. 使用 conic-gradient()
(錐形漸變)
這是最現代化且最靈活的方法,相容性也比較好(IE 不支援)。
.pie {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(
red 0deg,
red 120deg, /* 扇形結束角度 */
blue 120deg, /* 扇形結束角度 */
blue 360deg /* 或 0deg */
);
}
red 0deg
起始顏色從 0 度開始。red 120deg
紅色扇形到 120 度結束。blue 120deg
藍色(背景)從 120 度開始。blue 360deg
藍色到 360 度結束,完成一個圓。
優點: 簡單、靈活、支援任意角度、動畫效果流暢。
缺點: IE 不支援。
2. 使用 clip-path
(裁剪路徑)
clip-path
允許你使用各種形狀(包括多邊形)裁剪元素。可以利用它建立一個近似的扇形。
.pie {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
clip-path: polygon(50% 50%, 100% 50%, calc(50% + 50px * sin(120deg)), calc(50% - 50px * cos(120deg))); /* 120度扇形 */
}
50% 50%
圓心100% 50%
右邊中點,作為扇形的起始邊calc(50% + 50px * sin(120deg)), calc(50% - 50px * cos(120deg))
使用三角函式計算扇形結束點的座標。 50px 是半徑。
優點: 相容性較好。
缺點: 計算比較複雜,尤其對於動態角度;動畫效果可能不如 conic-gradient
平滑。 需要前處理器或 JavaScript 來動態計算角度。
3. 使用 SVG (可縮放向量圖形)
SVG 是建立扇形的另一種選擇,它提供了 <path>
元素,可以精確地定義各種形狀。
<svg width="100" height="100">
<path d="M50,50 L100,50 A50,50 0 0,0 21.65,11.65 z" fill="red" />
</svg>
M50,50
移動到圓心 (50, 50)L100,50
畫一條線到 (100, 50),扇形的起始邊A50,50 0 0,0 21.65,11.65
繪製一段圓弧:- 50,50 是 rx 和 ry (橢圓半徑,這裡是圓形所以相等)
- 0 是 x-axis-rotation (x 軸旋轉角度)
- 0 是 large-arc-flag (是否使用大弧)
- 0 是 sweep-flag (弧線方向)
- 21.65,11.65 是終點座標,需要根據角度計算
優點: 精確、靈活、支援動畫。
缺點: 程式碼略複雜,需要計算終點座標。
4. 使用多個元素 + transform (變換)
可以用兩個半圓形元素,透過旋轉和遮蓋來模擬扇形。這種方法比較複雜,不推薦。
總結:
對於現代瀏覽器,conic-gradient()
是建立扇形的最佳選擇,因為它簡單、靈活且支援動畫。對於需要相容舊版瀏覽器的專案,clip-path
或 SVG 是不錯的選擇,但需要額外的計算。 選擇哪種方法取決於你的具體需求和專案要求。
希望這些資訊能幫到你!