Wie kann ich mithilfe von Clippfaden ein gebogenes Div mit transparenter Oberseite erstellen?

Erstellen eines gebogenen Divs mit einer transparenten Oberseite

In einem Versuch, ein transparentes Div zu entwerfen, das sich über die gesamte Breite erstreckt und eine Höhe von ca 500px, Sie sind auf Herausforderungen beim Erreichen einer geschwungenen Form gestoßen. Um die gewünschte Form zu erhalten, wie im bereitgestellten Bild dargestellt, verwenden Sie den folgenden Ansatz:

Verwenden von Clippfaden:

Implementieren Sie Clippfade entweder auf den oberen oder unteren Elementen und stellen Sie sicher, dass sie sich wie folgt überlappen:

.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>

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von Clippfaden ein gebogenes Div mit transparenter Oberseite erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!