Comment puis-je créer des secteurs de cercle CSS en utilisant plusieurs dégradés d'arrière-plan ?

Dégradés d'arrière-plan multiples pour le dessin de secteurs de cercle CSS

Dessiner un cercle avec du CSS pur est simple, mais comment créer un secteur de ce cercle ?

Plutôt que d'essayer de dessiner la partie colorée, il est plus efficace de dessiner les parties transparentes en blanc.

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%);
}

Pour plus de 50%, le premier dégradé doit passer du transparent à la couleur verte :

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 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!