## Pouvez-vous créer des segments de graphique à secteurs en CSS sans JavaScript ?

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 des pourcentages appropriés.

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

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

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

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!