Wie kann ich mit Clip-Path ein gekrümmtes, transparentes DIV erstellen?

Erstellen eines gekrümmten DIV mit einer transparenten Oberseite

Sie möchten unbedingt ein transparentes DIV mit beträchtlicher Breite und Höhe in Ihre Arbeit integrieren und mithilfe von Rändern eine einzigartige Kurve erzielen Form. Das gewünschte Erscheinungsbild wird durch die gelbe Form in dem von Ihnen bereitgestellten Bild veranschaulicht.

Um diesen Effekt zu erzielen, sollten Sie die Integration eines Beschneidungspfads in Betracht ziehen, eine innovative Lösung, mit der Sie die Form präzise anpassen können. Clippfade üben die Kontrolle über den sichtbaren Teil eines Elements aus und ermöglichen es Ihnen, komplexe Formen zu definieren, die nahtlos mit den umgebenden Elementen verschmelzen.

Der Clippfad kann entweder auf die obere oder untere Ebene angewendet werden. Betrachten wir zur Veranschaulichung ein Szenario, in dem beide Elemente als Inline-Blöcke gerendert und nebeneinander positioniert werden.

Für die oberste Ebene verwenden wir Kreis als Clip-Pfad-Wert, wodurch effektiv ein kreisförmiger Ausschnitt gerendert wird. Die Abmessungen und das Hintergrundbild werden entsprechend konfiguriert.

.top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(image.jpg) center/cover;
}

Die untere Ebene ist so positioniert, dass sie die obere Ebene teilweise überlappt, wodurch die Illusion einer Krümmung entsteht. Sein Clip-Pfad wird mithilfe einer komplexeren Polygonform definiert, was zur gewünschten Kurve führt.

.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;
  height: 100px;
  width: 200px;
  background: yellow;
}

Dieser Ansatz ermöglicht eine präzise Kontrolle über die gekrümmte Form und ermöglicht es Ihnen, sie an Ihre spezifischen Anforderungen anzupassen. Experimentieren Sie mit verschiedenen Clip-Pfad-Werten, um die perfekte Krümmung und die gewünschte visuelle Wirkung zu erzielen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Clip-Path ein gekrümmtes, transparentes DIV erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!