Comment puis-je segmenter des cercles en tailles égales ou variables en utilisant CSS sans JavaScript ?

Segmentation de cercles avec CSS

En CSS, il est possible de créer des formes circulaires en utilisant la propriété border-radius. Cependant, l’ajout de segments à ces cercles nécessite une exploration plus approfondie. Voyons comment y parvenir sans JavaScript.

Segments de taille égale

Si les segments ne nécessitent pas d'éléments HTML et sont de taille égale, nous pouvons utilisez SCSS pour générer une liste d'arrêts pour un conic-gradient(). Une fonction SCSS personnalisée peut être créée pour répartir les arrêts uniformément :

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

En utilisant cette fonction, nous pouvons définir les couleurs et les angles des segments dans un dégradé conique() :

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

Cela créera un cercle avec des segments de taille égale, répartis uniformément autour de la circonférence.

Segments de tailles variables

Si les segments nécessitent des tailles différentes, nous pouvons toujours utiliser une stratégie similaire. La fonction Stops() peut être modifiée pour prendre des paramètres supplémentaires qui définissent les angles de début et de fin pour chaque segment. Dans la définition du dégradé, nous pouvons ensuite spécifier ces angles pour chaque arrêt de couleur.

De plus, si les segments doivent contenir du contenu ou des animations, nous pouvons utiliser des éléments HTML et les positionner dans le cercle à l'aide de transformations CSS. En ajustant soigneusement leurs tailles et leurs angles, nous pouvons créer des segments qui semblent se chevaucher et créer un design complexe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!