如何使用 CSS 漸層建立圓形扇形？

使用 CSS 繪製圓形扇形

雖然使用 CSS 繪製完整的圓形很簡單，但創建扇形需要更細緻的方法。但是，使用 CSS 漸變，可以有效地渲染扇形形狀。

扇形的多個漸變

不要嘗試繪製扇形的填充部分，而是考慮重點關注未填充的區域。透過定義多個線性漸變，您可以建立扇形的錯覺：

pie {
    border-radius: 50%;
    background-color: green;
}

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

在此範例中，.ten 類別透過應用兩個漸層來建立10% 的扇形：一個定義透明區域，另一個定義透明區域白色填充。透過操縱第一個漸變的角度，您可以調整磁區的大小。

其他範例

對於更複雜的範例，例如定義大於50% 的磁區，考慮改變梯度的順序以達到期望的效果：

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

結論

利用多個CSS漸變，可以創建不同程度的圓形扇區，而無需借助複雜的程式碼或外部庫。該技術提供了一種多功能且高效的方法來為您的 Web 應用程式添加視覺趣味和功能。

以上是如何使用 CSS 漸層建立圓形扇形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！