Segments dans un cercle à l'aide de CSS

Créer des cercles en CSS à l'aide de border-radius est une pratique courante. Cependant, pouvons-nous obtenir un effet similaire avec des segments, semblables à un diagramme circulaire ? Cet article examine les moyens d'y parvenir uniquement via HTML et CSS, à l'exclusion de l'utilisation de JavaScript.

Générer des segments de taille égale

Une approche pour les segments de taille égale consiste à générer une liste d'arrêt pour un conic-gradient() utilisant SCSS. Nous pouvons créer une fonction SCSS personnalisée stop($c) pour générer ces arrêts en fonction des couleurs fournies ($c), garantissant un espacement égal. Cette fonction prend en compte le nombre de tranches, calcule l'angle de tranche en pourcentage et génère une liste d'arrêts avec les pourcentages appropriés.

Par exemple, avec une palette de couleurs de Coolors, nous pouvons utiliser nos arrêts () dans une déclaration conic-gradient() :

.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}

Cette approche permet des angles de tranche personnalisables en spécifiant un angle différent de celui dans conic-gradient().