Eine Kurve auf einem Hintergrund erstellen

Im Bereich der Webentwicklung stehen Designer häufig vor der Notwendigkeit, Kurven aus ästhetischen Gründen zu erstellen . Ein solches Szenario beinhaltet die Positionierung einer ausgeschnittenen Kurve auf einem Hintergrund und nicht auf der rechten Seite.

Um dies zu erreichen, ist es notwendig, den vorhandenen CSS-Code zu ändern, um die Positionierung und Form der Kurve anzupassen. So geht's:

1. Pseudoelementposition anpassen:

   • Position der Pseudoelemente ändern (.box: vor und .box:nachher) nach unten:100 %. Dadurch werden sie an den unteren Rand des übergeordneten Elements .box verschoben.

2. Pseudoelementabmessungen ändern:

   • Legen Sie die Höhe der Pseudoelemente auf einen bestimmten Wert (z. B. 80 Pixel) fest, um die Höhe der Kurve zu steuern.
   • Passen Sie die Breite der Pseudoelemente auf 50 % an, damit sie die Hälfte der .box-Breite abdecken .

3. Verlaufshintergrundänderung:

   • Ändern Sie die radialen Verlaufshintergründe von .box:before und .box:after um die gewünschte geschwungene Form zu erzeugen. Bei dieser Technik werden zwei Farbverläufe mit unterschiedlichen Farben erstellt und in den gewünschten Kurvenwinkeln positioniert.

4. Transformieren und skaliertes Pseudoelement:

   • Wenden Sie transform:scaleX(-1) auf .box:after an, um es horizontal zu spiegeln. Dadurch wird der Spiegeleffekt der Kurve erzeugt.

Durch Befolgen dieser Schritte können Sie erfolgreich eine Kurve auf einem Hintergrund erstellen und den gewünschten Ausschnitteffekt erzielen.