Comment puis-je créer un graphique à secteurs en pourcentage en utilisant uniquement CSS ?

Graphique à secteurs en pourcentage avec CSS uniquement

La création d'éléments statiques en forme de secteur uniquement à l'aide de CSS nécessite une compréhension des propriétés CSS spécifiques.

Élément # 2 Création

Pour créer l'élément n°2, qui représente un pourcentage spécifique, utilisez la propriété CSS conic-gradient. Cette propriété crée un dégradé en forme de cône, dont le sommet est positionné au centre de l'élément parent. L'angle du cône est déterminé par la valeur en pourcentage, 100 % représentant un cercle complet.

Gestion de la valeur en pourcentage

Pour gérer la forme de l'élément n°2 pour différents pourcentages, utilisez une combinaison des propriétés CSS :

• conic-gradient : Ajustez l'angle du cône pour qu'il corresponde au pourcentage.
• clip-path : Utilisez un clip-path circulaire pour limiter la zone visible du dégradé conique. Cela garantit que la forme apparaît correctement pour les petits et les grands pourcentages.

Animation

Pour animer le diagramme circulaire, utilisez la propriété d'animation et définissez un état de départ qui définit le pourcentage sur 0. En augmentant progressivement la valeur en pourcentage, le diagramme circulaire se remplira progressivement.

Bords arrondis

Pour obtenir des bords arrondis bords, utilisez un dégradé radial avec deux arrêts de couleur. Le premier arrêt à 98 % crée une lumière subtile, tandis que le deuxième arrêt à 100 % utilise #0000 pour créer une limite nette. Un masque ou -webkit-mask est appliqué pour masquer sélectivement des parties du dégradé.

Exemple de code

.pie {
  --p: 20;
  --b: 22px;
  --c: darkred;
  --w: 150px;
  
  width: var(--w);
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
  mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}

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!