Comment créer des formes circulaires avec des bordures partielles en utilisant uniquement CSS en 2024 ?

Création de cercles avec des bordures partielles en HTML5/CSS3

Lorsqu'on lui demande de créer une forme circulaire avec une bordure partiellement visible en utilisant HTML5/CSS3, la question se pose si c'est même possible. Cet article explorera diverses techniques pour obtenir cet effet, en se concentrant sur la solution 2024.

Solution 2024 : une approche de pointe

La solution 2024 fonctionne sans JavaScript, sans éléments supplémentaires ou pseudo- éléments. Il repose uniquement sur les déclarations CSS et fonctionne exceptionnellement bien même avec des arrière-plans semi-transparents.

Cette approche innovante implique un masque double couche :

• Couche 1 (Conic- Masque dégradé) : Ce masque utilise un dégradé conique par rapport à la bordure, révélant une partie personnalisable (contrôlée par --p) du cercle, à partir de 12 heures dans le sens des aiguilles d'une montre.
• Couche 2 (masque à couverture complète) : Ce masque englobe toute la zone à l'intérieur de la boîte de rembourrage, garantissant que la bordure reste fermement dans le périmètre du cercle.

Code Extrait

L'exemple de code suivant présente la solution 2024 :

<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
}

/* To demonstrate compatibility with semi-transparent backgrounds */
body {
  background: 
    url(https://images.unsplash.com/photo-1693483923875-cdd9ef4a8046?w=800) 
      50%/ cover
}</code>

<code class="html"><div class='circular-progress'></div></code>

Avec ce code CSS, vous pouvez désormais créer sans effort des formes circulaires avec des bordures partiellement visibles. La variable --p offre une flexibilité dans le contrôle de la partie visible de la bordure, ce qui en fait une solution polyvalente pour une gamme de besoins de conception.

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!