segments dans un cercle en utilisant css: une exploration des techniques

créant un cercle dans CSS en utilisant la propriété Radius de bordure est une technique bien connue. Cependant, est-il possible de segmenter le cercle comme illustré dans l'image fournie? La question se pose de savoir si cela peut être réalisé sans s'appuyer sur JavaScript et uniquement via la solution HTML et CSS. Éléments

tranches inégales sans être éléments tranches égales qui nécessitent du contenu ou de l'animation

des tranches inégales qui nécessitent du contenu ou de l'animation

des tranches égales sans être des éléments
Arrêtez la liste pour un gradient conique () pour créer des tranches uniformes. Par exemple, considérez la palette suivante:
$ c: # f94144, # f3722c, # f8961e, # f9c74f, # 90BE6D, # 43AA8B arrêts ($ c) { $ n: longueur ($ c); // Nombre de tranches $ P: 100% / $ N; // tranche l'angle en% de cercle $ l: (); // liste des arrêts, initialement vide @for $ i de 1 à $ n { $ l: $ l, nth ($ c, $ i) 0% $ i * $ p } @return $ l }
Cette approche génère la liste suivante des arrêts:

# 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% Cependant, cette sortie comprend des décimales inutiles et des arrêts par défaut explicites. Par conséquent, une fonction améliorée est:

@ Fonction stops ($ c) { $ n: longueur ($ c); // Nombre de tranches $ P: 100% / $ N; // tranche l'angle en% de cercle $ l: (); // liste des arrêts, initialement vide @for $ i de 1 à $ n { $ l: $ l, nth ($ c, $ i) if ($ i & gt; 1, 0%, unquote ('')) if ($ i & lt; $ n, rond ($ i * $ p), unquote ('')) } @return $ l }

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

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

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

pour l'utiliser dans une conique-gradient (), nous définissons la classe suivante:

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

Avec seulement quatre déclarations CSS, nous pouvons créer un cercle segmenté en tranches égales. Pour faire tourner les tranches, nous spécifions simplement un angle de démarrage différent pour le conique-gradient ().

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

Demo en direct:

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