Comment ajouter un espacement entre les tranches dans un graphique à secteurs CSS uniquement ?

Ajouter un espacement aux tranches de diagramme circulaire CSS uniquement : une solution pratique

Les diagrammes circulaires rendus à l'aide de techniques CSS uniquement offrent une solution élégante pour visualiser les données. Cependant, l'absence d'espacement entre les tranches peut diminuer l'efficacité du graphique. Pour résoudre ce problème et créer un diagramme circulaire qui ressemble à l'image fournie, suivez ces étapes :

Étape 1 : Supprimez le chemin de clip inutile

Le code d'origine utilise largement le chemin de clip, ce qui introduit complexité inutile. Au lieu de cela, créez une structure simplifiée qui s'articule autour du positionnement absolu et du rayon de bordure.

Étape 2 : Créer un conteneur div

Établissez un div conteneur qui positionne toutes les tranches au centre tout en masquant les zones débordantes à l'aide débordement : caché.

Étape 3 : Tranches à positionnement absolu

Dans le récipient, positionnez chacune tranchez-le absolument et étendez-le pour occuper tout l'espace disponible. En utilisant le rayon de bordure, assurez-vous que les tranches apparaissent circulaires.

Étape 4 : Définir la largeur et la couleur de la bordure

Pour chaque tranche, définissez la largeur et la couleur de la bordure à l'aide de la propriété border. Utilisez des variables CSS personnalisées (par exemple, --c) pour simplifier la modification des couleurs des bordures.

Étape 5 : Faire pivoter les tranches

Appliquer la transformation : rotate() à chaque tranche pour les aligner correctement. la circonférence.

Exemple de code

Implémentez le code suivant pour créer un diagramme circulaire en CSS uniquement avec un espacement entre tranches :

.palette {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

.palette > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 50px solid var(--c, red);
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33.745%);
}

.color1 {
  transform: rotate(72deg);
  --c: blue;
}

.color2 {
  transform: rotate(144deg);
  --c: orange;
}

.color3 {
  transform: rotate(-72deg);
  --c: green;
}

.color4 {
  transform: rotate(-144deg);
  --c: purple;
}

<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
</div>

Avec ce code, vous pouvez désormais créer un diagramme circulaire visuellement attrayant uniquement en CSS avec un espacement clair entre les tranches.

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!