Wie kann ich mithilfe von Clippfaden ein gebogenes Div mit transparenter Oberseite erstellen?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-11-24 13:59:16

Original

1057 Leute haben es durchsucht

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!