Comment puis-je créer des cercles découpés transparents en utilisant uniquement CSS ?

Création de cercles découpés transparents avec CSS

En CSS, dessiner des cercles pleins est une tâche omniprésente. Cependant, découper un cercle creux représente un défi unique. Cela peut-il être réalisé en utilisant CSS seul ?

Explorer les possibilités

Nous pouvons facilement créer un cercle rempli en utilisant CSS, mais obtenir de la transparence et un intérieur creux nécessite un peu plus ingéniosité.

Réponse : Deux techniques ingénieuses

Il existe deux approches principales pour créer des cercles découpés transparents en CSS :

1. L'utilisation de SVG (Scalable Vector Graphics)

SVG nous permet de définir des formes à l'aide d'un balisage basé sur XML. En utilisant l'élément masque, nous pouvons découper une zone transparente et créer un cercle creux :

<svg viewbox="0 0 100 50" width="100%">
  <defs>
    <mask></mask></defs></svg>

2. En utilisant un élément Path

Alternativement, nous pouvons créer un cercle creux en utilisant un élément path qui définit deux arcs :

<svg width="100%" height="50">
  <path d="M 50,25 A 15,15 0 1 1 50,25 L 50,40 A 15,15 0 1 1 50,25" stroke="none" fill="#000000" fill-opacity="0.7"></path>
</svg>

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!