## Can You Slice a Circle into Segments Using Only CSS?

Segments in a Circle Using CSS: An Exploration of Techniques

Creating a circle in CSS using the border radius property is a well-known technique. However, is it possible to segment the circle as depicted in the provided image? The question arises whether this can be achieved without relying on JavaScript and solely through HTML and CSS.

Solution for 2024

To delve into this issue, we'll categorize different scenarios:

• Equal slices without being elements
• Unequal slices without being elements
• Equal slices that require content or animation
• Unequal slices that require content or animation

Equal Slices Without Being Elements

Leveraging a color palette, SCSS can generate a stop list for a conic-gradient() to create uniform slices. For instance, consider the following palette:

$c: #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590;

We define a SCSS function to generate equally spaced slices:

@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) 0% $i*$p
    }
    
    @return $l
}

This approach generates the following list of stops:

#f94144 0% 14.2857142857%, #f3722c 0% 28.5714285714%,
#f8961e 0% 42.8571428571%, #f9c74f 0% 57.1428571429%,
#90be6d 0% 71.4285714286%, #43aa8b 0% 85.7142857143%,
#577590 0% 100%

However, this output includes unnecessary decimals and explicit default stops. Therefore, an improved function is:

@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
}

The result is as follows:

#f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, #f9c74f 0% 57%,
#90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%

This function generates more intuitive stops.

To utilize this in a conic-gradient(), we define the following class:

.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))
}

With just four CSS declarations, we can create a circle segmented into equal slices. To rotate the slices, we simply specify a different start angle for the conic-gradient().

background: conic-gradient(from 17deg, stops($c))

Live Demo:

<code class="html"><div class="pie"></div>

<code class="css">.pie {
  width: 16em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make pie element square */
  border-radius: 50%; /* turn square into disc */
  /* equally sized slices */
  background: 
    conic-gradient(from 17deg, #f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, 
        #f9c74f 0% 57%, #90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%)
}</code>

The above is the detailed content of ## Can You Slice a Circle into Segments Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!