Segments in a Circle Using CSS

Creating circles in CSS using border-radius is a common practice. However, can we achieve a similar effect with segments, akin to a pie chart? This article delves into ways of achieving this through HTML and CSS alone, excluding the use of JavaScript.

Generating Equal-Sized Segments

One approach for equal-sized segments involves generating a stop list for a conic-gradient() using SCSS. We can create a custom SCSS function stops($c) to generate these stops based on the provided colors ($c), ensuring equal spacing. This function takes into account the number of slices, calculates the slice angle as a percentage, and generates a list of stops with appropriate percentages.

For instance, with a palette of colors from Coolors, we can use our stops() function within a conic-gradient() declaration:

.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}

This approach allows for customizable slice angles by specifying a different from angle in the conic-gradient().