Comment pouvez-vous créer des segments dans un cercle à l'aide de CSS et gérer différentes exigences de tranche ?

Segments dans un cercle à l'aide de CSS : gestion de différentes exigences de tranche

Bien que CSS permette de créer des cercles à l'aide du hack de rayon de bordure, étendant cette technique inclure des segments présente un défi. Il existe cependant une solution qui consiste à combiner CSS et SCSS pour y parvenir sans recourir à JavaScript.

Générer des tranches égales

Si les tranches ne nécessitent pas d'éléments distincts et sont de taille égale, SCSS offre la flexibilité de générer une liste d'arrêts pour un gradient conique. Étant donné une palette de couleurs, une fonction SCSS peut répartir les arrêts uniformément autour du cercle.

<code class="scss">@function stops($c) {
  $n: length($c);
  $p: 100%/$n;
  $l: ();

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

Utilisation de Conic-Gradient pour les segments

Avec la liste d'arrêt générée, un dégradé conique est utilisé pour peindre les segments sur l'élément circulaire. Pour les segments de taille égale, le code est simple :

<code class="css">.pie {
  width: 20em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(stops($c))
}</code>

Contrôle de l'angle de départ

Pour garantir que les segments démarrent à un angle spécifique (autre que 12 o' clock), le mot-clé from peut être ajouté au conic-gradient() :

<code class="css">background: conic-gradient(from 17deg, stops($c))</code>

Gestion des tranches riches en contenu

Pour les segments qui ont besoin de contenu ou nécessitent animation hors du cercle, une approche plus complexe est nécessaire. Cela implique d'utiliser des pseudo-éléments et des animations CSS pour obtenir le résultat souhaité.

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!