How Can I Create Circular Sectors Using Only CSS Gradients?

Drawing a Circle Sector with CSS

While drawing a full circle with CSS is straightforward, creating a circular sector can be more challenging. However, using multiple background gradients, it is possible to achieve this without resorting to JavaScript.

Using Gradients to Draw the Sector

Instead of representing the sector with a green area, you can create a reverse effect by drawing the white or transparent portions. This is done by employing two linear gradients:

• The first gradient covers the sector's angle and transitions from transparent to white at the midpoint.
• The second gradient starts at a perpendicular angle and transitions from white to transparent at the midpoint.

For example, to draw a 10% sector:

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

The angle specified in the first gradient (126deg) is calculated as 90 (360 * percentage).

Example:

<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;
}

This technique allows for the creation of circular sectors with varying angles, providing a versatile way to represent percentages or other data values using CSS.

The above is the detailed content of How Can I Create Circular Sectors Using Only CSS Gradients?. For more information, please follow other related articles on the PHP Chinese website!