如何仅使用 CSS 渐变创建圆形扇形？

使用 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中文网其他相关文章！