Comment puis-je créer des secteurs circulaires avec des dégradés CSS ?

Dessiner des secteurs de cercle avec CSS

Bien que dessiner un cercle complet avec CSS soit simple, la création d'un secteur nécessite une approche plus nuancée. Cependant, avec les dégradés CSS, il est possible de restituer efficacement les formes des secteurs.

Dégradés multiples pour les secteurs

Au lieu d'essayer de dessiner la partie remplie du secteur, envisagez en se concentrant sur les zones non comblées. En définissant plusieurs dégradés linéaires, vous pouvez créer l'illusion d'un secteur :

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

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

Dans cet exemple, la classe .ten crée un secteur de 10 % en appliquant deux dégradés : l'un définissant une zone transparente et l'autre un remplissage blanc. En manipulant l'angle du premier dégradé, vous pouvez ajuster la taille du secteur.

Exemple supplémentaire

Pour des exemples plus complexes, comme la définition de secteurs supérieurs à 50 %, envisagez de modifier l'ordre des dégradés pour obtenir l'effet souhaité. effet :

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

Conclusion

En utilisant plusieurs dégradés CSS, il est possible de créer des secteurs circulaires à des degrés divers sans recourir à du code complexe ou à des bibliothèques externes. Cette technique offre une approche polyvalente et efficace pour ajouter un intérêt visuel et des fonctionnalités à vos applications Web.

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!