Wie kann ich mit CSS gekrümmte transparente Divs erstellen?

Gebogene transparente Divs mit CSS erstellen

Bei Ihrer Suche nach einem transparenten Div mit einer geschwungenen Form stießen Sie auf Schwierigkeiten, das Gewünschte zu erreichen Wirkung. Lassen Sie uns untersuchen, wie Sie diese Herausforderung meistern und die gewünschte gekrümmte Form erstellen können.

Um die gekrümmte Form zu erstellen, bietet CSS die Clip-Path-Eigenschaft, mit der Sie die Form eines Elements mithilfe verschiedener geometrischer Funktionen definieren können. Sie können es entweder auf das obere oder das untere Element anwenden und so einen Überlagerungseffekt erzeugen.

Der folgende Codeausschnitt zeigt, wie Sie mit Clip-Path die gewünschte Form erreichen:

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

/* For the first div */
.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;
}

/* For the second div */
.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;
}

Dieser Code erstellt zwei Divs, eines mit einer kreisförmigen Oberseite und einer gelben Unterseite und das andere mit einer benutzerdefinierten polygonalen Oberseite und einer gelben Unterseite. Durch Anpassen der Clip-Path-Werte können Sie je nach Wunsch verschiedene geschwungene Formen erstellen.

Durch die Verwendung von Clip-Path haben Sie die Möglichkeit, faszinierende geschwungene Formen zu entwerfen und die Ästhetik Ihrer Website oder Webanwendung zu steigern.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS gekrümmte transparente Divs erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!