How can I segment circles into equal or varying sizes using CSS without JavaScript?

Segmenting Circles with CSS

In CSS, it's possible to create circular shapes using the border-radius property. However, adding segments to these circles requires further exploration. Let's delve into ways to achieve this without JavaScript.

Equal Sized Segments

If the segments don't require HTML elements and are of equal size, we can utilize SCSS to generate a list of stops for a conic-gradient(). A custom SCSS function can be created to distribute the stops evenly:

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

Using this function, we can define the colors and angles for the segments within a conic-gradient():

<code class="css">.pie {
    width: 20em; /* desired pie diameter */
    aspect-ratio: 1; /* square element */
    border-radius: 50%; /* disc shape */
    background: conic-gradient(stops(#f94144, #f3722c, #f8961e, #f9c74f, 
        #90be6d, #43aa8b, #577590))
}</code>

This will create a circle with equally sized segments, distributed evenly around the circumference.

Segments with Varying Sizes

If the segments require varying sizes, we can still utilize a similar strategy. The stops() function can be modified to take additional parameters that define the start and end angles for each segment. Within the gradient definition, we can then specify these angles for each color stop.

Additionally, if the segments need to contain content or animations, we can use HTML elements and position them within the circle using CSS transforms. By carefully adjusting their sizes and angles, we can create segments that appear to overlap and create a complex design.

The above is the detailed content of How can I segment circles into equal or varying sizes using CSS without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!