Wie erstelle ich in CSS eine Kurve über einem Hintergrund?

Erstellen einer Kurve über einem Hintergrund

Im Bereich der Webentwicklung stoßen Designer häufig auf die Notwendigkeit, Kurven aus ästhetischen Gründen zu erstellen . Ein solches Szenario besteht darin, eine ausgeschnittene Kurve über einem Hintergrund und nicht rechts zu positionieren.

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:

   • Ändern Sie die Position der Pseudoelemente (.box: vor und .box:nachher) nach unten:100 %. Dadurch werden sie an den unteren Rand der .box des übergeordneten Elements 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. Änderung des Verlaufshintergrunds:

   • Ä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. Transformation und skaliertes Pseudoelement:

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

Indem Sie diese Schritte befolgen, können Sie erfolgreich eine Kurve auf einem Hintergrund erstellen und den gewünschten Ausschnitteffekt erzielen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS eine Kurve über einem Hintergrund?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!