How Can I Create Circular Sectors with CSS Gradients?

Drawing Circle Sectors with CSS

While drawing a complete circle with CSS is straightforward, creating a sector requires a more nuanced approach. However, with CSS gradients, it is possible to effectively render sector shapes.

Multiple Gradients for Sectors

Instead of attempting to draw the filled portion of the sector, consider focusing on the unfilled areas. By defining multiple linear gradients, you can create the illusion of a sector:

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

In this example, the .ten class creates a 10% sector by applying two gradients: one defining a transparent area and the other a white fill. By manipulating the angle of the first gradient, you can adjust the sector's size.

Additional Example

For more complex examples, such as defining sectors greater than 50%, consider shifting the order of gradients to achieve the desired effect:

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

Conclusion

By utilizing multiple CSS gradients, it is possible to create circular sectors of varying degrees without resorting to complex code or external libraries. This technique offers a versatile and efficient approach to adding visual interest and functionality to your web applications.

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