How to Create Circle Sectors Using Only CSS?

Drawing Circle Sectors with CSS

Problem: How to draw a sector of a circle using pure CSS?

Solution:

Conventional CSS techniques focus on creating the entire circle and then overlaying it with a mask to reveal the desired sector. However, for more efficient and dynamic solutions, we can leverage multiple background gradients:

CSS Code:

.pie {
  border-radius: 50%;
  background-color: green;
}

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

Explanation:

1. The .pie class defines the overall circle with a green background and rounded corners.

2. The .ten class creates a 10% sector (or 126 degrees) by overlaying two linear gradients:

   • The first gradient (126 degrees) creates the white background for the sector.
   • The second gradient (90 degrees) acts as a mask, revealing the green background in the non-sector area.

Extension for Custom Sectors:

The above technique can be modified to create sectors of any angle:

.custom-sector {
  background-image:
    linear-gradient((90 + (360 * START_ANGLE / 100))deg, transparent 50%, white 50%),
    linear-gradient(90deg, white 50%, transparent 50%);
}

Replace START_ANGLE with the desired angle in degrees (0-360) to draw a sector representing that angle.

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