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

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

Mary-Kate Olsen

發布： 2024-11-30 22:09:12

原創

535 人瀏覽過

How Can I Create Circular Sectors Using Only CSS Gradients?

使用CSS 繪製圓形扇形

雖然使用CSS 繪製完整的圓形很簡單，但創建圓形扇形可能更具挑戰性。但是，使用多個背景漸變，無需借助 JavaScript 即可實現此目的。

使用漸變繪製扇形

而不是用綠色表示扇形區域中，您可以透過繪製白色或透明部分來創建相反的效果。這是透過使用兩個線性漸變來完成的：

第一個漸變覆蓋扇形的角度並在中點從透明過渡到白色。
第二個漸變從垂直角度開始，在中點處從白色過渡到透明。

例如，繪製 10%扇區：

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

登入後複製

第一個漸變中指定的角度 (126deg) 計算為 90（360 * 百分比）。

範例：

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

登入後複製

pie {
    border-radius: 50%;
    background-color: green;
    width: 5em;
    height: 5em;
    float: left;
    margin: 1em;
    border: 2px solid green;
}

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

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

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

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

.onehundred {
    background-image: none;
}

登入後複製

該技術允許創建具有不同角度的圓形扇形，提供了一種通用的表示方式使用CSS 的百分比或其他數據值。

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