How Can I Create CSS Circle Sectors Using Multiple Background Gradients?

Multiple Background Gradients for CSS Circle Sector Drawing

Drawing a circle with pure CSS is simple, but how do we create a sector of that circle?

Rather than trying to draw the colored portion, it's more efficient to draw the transparent portions in white.

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

For greater than 50%, the first gradient needs to blend from transparent to the green color:

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

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