Comment puis-je créer des secteurs circulaires en utilisant uniquement des dégradés CSS ?

Dessiner un secteur de cercle avec CSS

Bien que dessiner un cercle complet avec CSS soit simple, créer un secteur circulaire peut être plus difficile. Cependant, en utilisant plusieurs dégradés d'arrière-plan, il est possible d'y parvenir sans recourir à JavaScript.

Utiliser des dégradés pour dessiner le secteur

Au lieu de représenter le secteur avec un vert zone, vous pouvez créer un effet inverse en dessinant les parties blanches ou transparentes. Cela se fait en utilisant deux dégradés linéaires :

• Le premier dégradé couvre l'angle du secteur et passe du transparent au blanc au milieu.
• Le deuxième dégradé commence à un angle perpendiculaire et transitions du blanc au transparent au milieu.

Par exemple, pour dessiner un 10 % secteur :

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

L'angle spécifié dans le premier gradient (126deg) est calculé comme 90 (360 * pourcentage).

Exemple :

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

pie {
    border-radius: 50%;
    background-color: green;
    width: 5em;
    height: 5em;
    float: left;
    margin: 1em;
    border: 2px solid green;
}

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

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

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

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

.onehundred {
    background-image: none;
}

Cette technique permet la création de secteurs circulaires avec des angles variables, offrant un moyen polyvalent de représenter des pourcentages ou d'autres valeurs de données en utilisant CSS.

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!