Comment puis-je créer une découpe transparente en demi-cercle en utilisant uniquement CSS3 ?

Création d'une découpe en demi-cercle transparent avec CSS3

Pour obtenir la forme de demi-cercle transparent souhaitée, où tous les éléments restent noirs ou transparents , une technique utilisant la pseudo propriété CSS ::after peut être employée.

L'astuce réside dans la combinaison astucieuse d'un rectangle noir et d'un cercle. Le rectangle sert de base, fournissant le fond noir. Par-dessus, un cercle est positionné de manière absolue et partiellement masquée à l'aide de la propriété overflow.

La clé de cette technique est le pseudo-élément ::after ajouté au cercle. Avec sa largeur et sa hauteur fixées à 100 px, il forme un demi-cercle parfait. Une bordure de 40 px d'épaisseur est appliquée, mais l'arrière-plan reste transparent.

En ajustant la position du pseudo-élément ::after, le demi-cercle peut être décalé vers le haut pour s'aligner avec le bord du rectangle, créant ainsi l'illusion d'une découpe.

Voici un exemple de code qui démontre cette technique :

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

<div class="rect">
  <span class="circle"></span>
</div>

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!