How can I create segmented circles using CSS without JavaScript?

Segments in a Circle Using CSS

Creating circles using CSS's border-radius hack is a common practice, but how do you achieve a segmented appearance like the one depicted in the provided image? Is there a way to achieve this using HTML and CSS, excluding JavaScript?

Solution

2024 Solution

Let's explore different cases based on whether the segments need to be elements and whether they are equal in size:

1. Slices don't need to be elements and they're equal

In this case, we can leverage a palette of colors and use SCSS to generate a conic-gradient() that evenly distributes the slices. For instance, using the palette from coolors.co, we can create a SCSS function:

<code class="scss">@function stops($c) {
  $n: length($c); // number of slices
  $p: 100%/$n; // slice angle as a % of circle
  $l: (); // list of stops, initially empty
  
  @for $i from 1 through $n {
    $l: $l, nth($c, $i) 
        if($i > 1, 0%, unquote(''))
        if($i < $n, round($i*$p), unquote(''))
  }
  
  @return $l
}</code>

This function generates a stop list for equal slices. We can then use it within a conic-gradient():

<code class="css">.pie {
  width: 20em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make the element square */
  border-radius: 50%; /* turn square into disc */
  /* equally-sized slices */
  background: conic-gradient(stops($c))
}</code>

This approach allows us to create equal segments without the need for separate elements. Adjusting the start angle of the conic-gradient() also becomes feasible.

2. Other cases

We can explore additional cases such as:

• Slices don't need to be elements but they're not equal
• Slices need content/ to animate out and they're equal
• Slices need content/ to animate out and they're not equal

Each of этих cases requires unique approaches and techniques that go beyond the scope of the original query.

The above is the detailed content of How can I create segmented circles using CSS without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!