如何僅使用 CSS 建立扇形？-css教學-PHP中文網

如何僅使用 CSS 建立扇形？

Linda Hamilton

發布： 2024-11-26 03:48:16

原創

295 人瀏覽過

How to Create Circle Sectors Using Only CSS?

用CSS繪製圓的扇形

問題：如何使用pure繪製圓的扇形CSS？

解決方案：

傳統的 CSS 技術專注於創建整個圓，然後用遮罩覆蓋它以顯示所需的扇區。然而，為了更有效率和動態的解決方案，我們可以利用多個背景漸變：

CSS代碼：

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

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

登入後複製

解釋：

解釋：
解釋：
- 解釋：

解釋：

.pie類別定義了綠色背景、圓角的整體圓

.custom-sector {
  background-image:
    linear-gradient((90 + (360 * START_ANGLE / 100))deg, transparent 50%, white 50%),
    linear-gradient(90deg, white 50%, transparent 50%);
}

登入後複製

.ten 類別透過疊加兩個線性漸變創建10% 扇區（或126 度）：

第一個漸層（126 度）創造白色該扇區的背景。第二個漸變（90 度）充當遮罩，顯露出扇區中的綠色背景非扇形區域。自訂扇形的擴充：可以修改上述技術以建立任何角度的扇形：將START_ANGLE 替換為所需的角度（以度為單位） (0-360)繪製代表該角度的扇形。

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