Comment puis-je créer une division incurvée avec un dessus transparent à l'aide de chemins de détourage ?

Création d'un div incurvé avec un dessus transparent

Dans une tentative de concevoir un div transparent s'étendant sur toute la largeur et avec une hauteur d'environ 500px, vous avez rencontré des difficultés pour obtenir une forme incurvée. Pour obtenir la forme souhaitée, comme illustré dans l'image fournie, utilisez l'approche suivante :

Utilisation de chemins de détourage :

Implémentez des chemins de détourage sur les éléments supérieurs ou inférieurs. et assurez-vous qu'ils se chevauchent comme suit :

.first,
.second {
  display: inline-block;
  margin: 5px;
}

.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

.second .top {
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.second .bottom {
  clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

<div class="first">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

<div class="second">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</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!