## Pouvez-vous découper un cercle en segments en utilisant uniquement CSS ?

Segments dans un cercle à l'aide de CSS : une exploration des techniques

Créer un cercle en CSS à l'aide de la propriété de rayon de bordure est une méthode bien connue technique. Cependant, est-il possible de segmenter le cercle comme le montre l’image fournie ? La question se pose de savoir si cela peut être réalisé sans recourir à JavaScript et uniquement via HTML et CSS.

Solution pour 2024

Pour approfondir cette question, nous allons catégoriser différents scénarios :

• Tranches égales sans être des éléments
• Tranches inégales sans être des éléments
• Tranches égales qui nécessitent du contenu ou une animation
• Tranches inégales qui exiger du contenu ou une animation

Tranches égales sans être des éléments

En tirant parti d'une palette de couleurs, SCSS peut générer une liste d'arrêt pour un dégradé conique() pour créer tranches uniformes. Par exemple, considérons la palette suivante :

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

Nous définissons une fonction SCSS pour générer des tranches équidistantes :

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

Cette approche génère la liste d'arrêts 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%

Cependant, cette sortie inclut des décimales inutiles et des arrêts par défaut explicites. Par conséquent, une fonction améliorée est :

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

Le résultat est le suivant :

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

Cette fonction génère des arrêts plus intuitifs.

Pour l'utiliser de manière conique -gradient(), nous définissons la classe suivante :

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

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

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

Démo en direct :

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

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!