Comment puis-je créer des cercles segmentés en utilisant CSS sans JavaScript ?

Segments dans un cercle à l'aide de CSS

Créer des cercles à l'aide du hack border-radius de CSS est une pratique courante, mais comment obtenir un segment segmenté apparence comme celle représentée dans l’image fournie ? Existe-t-il un moyen d'y parvenir en utilisant HTML et CSS, à l'exclusion de JavaScript ?

Solution

Solution 2024

Explorons différents cas selon que les segments doivent être des éléments et s'ils sont de taille égale :

1. Les tranches n'ont pas besoin d'être des éléments et elles sont égales

Dans ce cas, nous pouvons exploiter une palette de couleurs et utiliser SCSS pour générer un conic-gradient() qui répartit uniformément les tranches. Par exemple, en utilisant la palette de coolors.co, nous pouvons créer une fonction SCSS :

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

Cette fonction génère une liste d'arrêt pour des tranches égales. Nous pouvons ensuite l'utiliser au sein d'un conic-gradient() :

<code class="css">.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))
}</code>

Cette approche nous permet de créer des segments égaux sans avoir besoin d'éléments séparés. Ajuster l'angle de départ du conic-gradient() devient également réalisable.

2. Autres cas

Nous pouvons explorer des cas supplémentaires tels que :

• Les tranches n'ont pas besoin d'être des éléments mais elles ne sont pas égales
• Les tranches doivent contenu/ pour animer et ils sont égaux
• Les tranches ont besoin de contenu/ pour s'animer et elles ne sont pas égales

Chacun de ces cas nécessite des approches et des techniques uniques qui vont au-delà la portée de la requête d'origine.

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!