Heim > Artikel > Web-Frontend > Wie erstelle ich mit CSS eine geschwungene Oberseite für einen Hintergrund?
Erstellen einer Kurve oben auf einem Hintergrund
Im bereitgestellten Design soll der Ausschnitt über dem Hintergrund erscheinen und nicht über ihm Es ist richtig. So können Sie den CSS-Code ändern, um dies zu erreichen:
<code class="css">/* Make the box taller to accommodate the curve */ .box { margin-top: 90px; } /* Create the top and bottom pseudo elements */ .box:before, .box:after { bottom: 100%; width: 50%; left: 0; height: 80px; /* Adjust this to control the curve's height*/ 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; } /* Flip the after pseudo element */ .box:after { transform-origin: right; transform: scaleX(-1); }</code>
In diesem aktualisierten Code:
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS eine geschwungene Oberseite für einen Hintergrund?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!