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:

• Der obere Rand für die Box wird erhöht, um sicherzustellen, dass sie höher ist als die Kurve.
• Die Pseudoelemente werden beide am unteren Rand des Felds positioniert (unten: 100 %).
• Die Höhe der Pseudoelemente wird angepasst, um die Höhe der Kurve zu steuern.
• Die Transformationseigenschaft wird verwendet, um die rechte Seite der Kurve umzudrehen.

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!