用CSS畫出一個任意角度的扇形，可以寫多種實現的方法

王铁柱6發表於2024-11-23
CSS

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 是不錯的選擇，但需要額外的計算。 選擇哪種方法取決於你的具體需求和專案要求。

希望這些資訊能幫到你!

相關文章