Comment créer des secteurs de cercle en utilisant uniquement CSS ?

Dessiner des secteurs de cercle avec CSS

Problème :Comment dessiner un secteur de cercle en utilisant du CSS pur ?

Solution :

Techniques CSS conventionnelles concentrez-vous sur la création du cercle entier, puis superposez-le avec un masque pour révéler le secteur souhaité. Cependant, pour des solutions plus efficaces et dynamiques, nous pouvons exploiter plusieurs dégradés d'arrière-plan :

Code CSS :

.pie {
  border-radius: 50%;
  background-color: green;
}

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

Explication :

1. La classe .pie définit le cercle global avec un fond vert et arrondi coins.

2. La classe .ten crée un secteur de 10 % (ou 126 degrés) en superposant deux dégradés linéaires :

   • Le premier dégradé (126 degrés) crée le blanc fond pour le secteur.
   • Le deuxième dégradé (90 degrés) fait office de masque, révélant le fond vert dans le non-secteur zone.

Extension pour les secteurs personnalisés :

La technique ci-dessus peut être modifiée pour créer des secteurs de n'importe quel angle :

.custom-sector {
  background-image:
    linear-gradient((90 + (360 * START_ANGLE / 100))deg, transparent 50%, white 50%),
    linear-gradient(90deg, white 50%, transparent 50%);
}

Remplacez START_ANGLE par l'angle souhaité en degrés (0-360) pour dessiner un secteur représentant cela angle.

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!