Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich mit CSS eine geschwungene Oberseite für einen Hintergrund?

Wie erstelle ich mit CSS eine geschwungene Oberseite für einen Hintergrund?

Barbara Streisand
Barbara StreisandOriginal
2024-11-02 17:38:02903Durchsuche

How to Create a Curved Top for a Background Using CSS?

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!

Stellungnahme:
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