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

Créer des découpes transparentes et transparentes avec CSS

Obtenir une forme découpée transparente dans un div en utilisant uniquement CSS3 peut être un défi, surtout lorsque le la forme n’est pas une simple figure géométrique. Cet article présente une solution qui utilise la pseudo-propriété ::after pour créer une découpe en demi-cercle transparente, garantissant que tous les éléments restent noirs ou transparents.

L'approche consiste à créer un rectangle noir avec un cercle transparent placé dessus. il. Cependant, pour obtenir l'effet de découpe souhaité, le cercle nécessite un rayon transparent s'étendant au-delà de ses limites. Ceci est réalisé en utilisant le pseudo-élément ::after avec une grande bordure pour créer la forme en demi-cercle.

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

Ce code crée un rectangle noir avec une découpe en demi-cercle transparent sur la moitié supérieure. Le pseudo-élément ::after positionne un cercle transparent au-dessus du rectangle et applique une large bordure noire pour créer la forme arrondie. L'arrière-plan transparent de l'élément ::after permet à la couleur du rectangle et à l'arrière-plan environnant de transparaître, ce qui donne un effet de découpe homogène.

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!