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

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

Susan Sarandon

Libérer： 2024-11-24 13:59:16

original

1055 Les gens l'ont consulté

How Can I Create a Curved Div with a Transparent Top Using Clip Paths?

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

Copier après la connexion

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

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

Copier après la connexion

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!