Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mithilfe von CSS eine ausgeschnittene Oberseite in einen Hintergrund mit gebogener Oberseite umwandeln?

Wie kann ich mithilfe von CSS eine ausgeschnittene Oberseite in einen Hintergrund mit gebogener Oberseite umwandeln?

Mary-Kate Olsen
Freigeben: 2024-11-01 13:18:29
Original
1093 Leute haben es durchsucht

How can I transform a cutout top into a curved top background using CSS?

Umwandeln eines Ausschnitts oben in einen gekrümmten oberen Hintergrund

In dieser codebasierten Aufgabe wollen wir einen Ausschnitt auf der rechten Seite eines Blocks in einen umwandeln geschwungene Form, die anmutig auf dem Block sitzt.

Der aktuelle Codeausschnitt beinhaltet eine .box, die ein .top-Element enthält. Während der gewünschte Effekt darin besteht, den Ausschnitt oben zu haben, wird er im Code rechts platziert. Tauchen wir also in die überarbeitete Version ein:

<code class="css">.box {
  margin-top: 90px;
  width: 200px;
  height: 100px;
  background: white;
  position: relative;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px;
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%, #0000) top,
    radial-gradient(50% 100% at top right, #0000 98%, #fff) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}

body {
  background: pink;
}</code>
Nach dem Login kopieren

Wichtige Anpassungen:

  • Wir haben den Rand oben in der .box mindestens so eingestellt, dass er übereinstimmt die Höhe der Pseudoelemente, um sicherzustellen, dass der Ausschnitt den Block nicht überlappt.
  • Die Pseudoelemente werden jetzt am unteren Rand der .box mit „bottom: 100%“ positioniert.
  • Die Die Höhe der Pseudoelemente ist auf 80 Pixel eingestellt, die Sie anpassen können, um die Höhe der Kurve zu steuern.
  • Die Hintergrundverläufe wurden geändert, um den gewünschten radialen Effekt zu erzeugen.

Voilà! Sie haben jetzt einen geschwungenen Ausschnitt, der nahtlos von der Oberseite des Blocks ausgeht. Experimentieren Sie ruhig weiter und kreieren Sie eine Kurve, die perfekt zu Ihrem Design passt.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS eine ausgeschnittene Oberseite in einen Hintergrund mit gebogener Oberseite umwandeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage