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

Création d'un demi-cercle transparent découpé dans une division

Énoncé du problème :

Réaliser une découpe transparente en forme de demi-cercle au sein d'un div en utilisant uniquement CSS3, avec la contrainte que tous les éléments formant la forme doivent être soit noir, soit transparent.

Solution :

Pour créer la forme souhaitée, nous utilisons la pseudo-propriété ::after de CSS:

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

HTML :

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

Cette solution crée un triangle équilatéral contenant un cercle qui est comprimé vers le haut afin que l'intersection forme un forme en demi-cercle. En définissant les propriétés de l'arrière-plan sur noir ou transparent, nous obtenons 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!