Comment créer un cercle avec une bordure partielle en utilisant HTML5 et CSS3 ?

Créer un cercle avec une bordure partielle en HTML5/CSS3

Il est en effet possible de créer un cercle avec une bordure partielle en utilisant HTML5 et CSS3. Une technique efficace consiste à utiliser plusieurs couches de masques pour obtenir l'effet souhaité.

Solution 2024 :

Cette méthode utilise deux couches de masquage sans avoir besoin de JavaScript, des informations supplémentaires éléments, ou pseudos. Il reste fonctionnel même lorsque l'élément possède un fond semi-transparent. Il s'agit de :

1. Établir un élément circulaire (largeur arbitraire, rapport hauteur/largeur de 1, rayon-bordure de 50 %), avec une bordure spécifiée.
2. Définir un masque à dégradé conique par rapport à la zone de bordure, couvrant un pourcentage particulier de la surface de l'élément (par exemple, 17 %).
3. Ajout d'un calque de masque complet limité à la zone de remplissage.

Voici un exemple d'extrait de code CSS :

<code class="css">.circular-progress {
  border: solid 1.5em hotpink;
  width: 50vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsla(180, 100%, 50%, .5);
  mask:
    linear-gradient(red 0 0) padding-box,
    conic-gradient(red var(--p, 17%), transparent 0%) border-box;
}

/* for visual clarity with a semi-transparent background */
body {
  background: url(image-url) 50%/cover;
}</code>

Cette méthode est efficace pour créer un cercle avec une bordure partielle, et elle n'est pas affectée par la transparence de l'arrière-plan de l'élément.

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!