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

Création d'une découpe en demi-cercle transparent dans un div à l'aide de CSS3

Pour construire une découpe en demi-cercle transparent dans un div en utilisant uniquement CSS3 , la couleur d'arrière-plan de tous les éléments qui forment la forme doit rester noire ou transparente. Une technique qui répond à cette exigence consiste à utiliser la pseudo-propriété ::after de CSS.

Voici un exemple de la façon d'obtenir l'effet souhaité :

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>

Cette approche crée un rectangle avec une superposition noire et un cercle semi-transparent. Le cercle est positionné de manière absolue pour créer une forme découpée transparente.

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!