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

Découpe d'un demi-cercle transparent en utilisant CSS

Malgré l'absence d'un rectangle noir avec un cercle blanc, il est possible de créer une moitié transparente -découpe de cercle en utilisant uniquement CSS3. La clé réside dans l'utilisation judicieuse de la pseudo-propriété ::after.

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

Dans ce code, l'élément .rect représente la forme principale, tandis que le .circle et son pseudo-élément ::after forment ensemble la découpe. . L'élément ::after crée une forme de demi-cercle qui est positionnée derrière l'élément .circle, créant l'illusion d'une découpe en demi-cercle. L'arrière-plan transparent de l'élément ::after permet à la couleur d'arrière-plan de transparaître, obtenant ainsi l'effet souhaité.

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!