Wie erstelle ich mit CSS einen gebogenen Boden für ein DIV?

Den Boden eines DIV mit CSS nach innen krümmen

Um den gekrümmten Bodeneffekt wie abgebildet zu erzielen, besteht eine Technik in der Verwendung von border-radius mit spezifische Werte. So implementieren Sie es:

.curved {
  margin: 0 auto;
  height: 400px;
  background: lightblue;
  border-radius: 0 0 200px 200px;
}

Dieser Code erstellt ein rechteckiges DIV mit abgerundeter Unterkante, wie gezeigt:

Transparente Kurven

Alternativ kann ein radialer Farbverlauf verwendet werden, um eine Transparenz zu erzeugen Kurve:

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}

<div class="container"></div>

Dieser Ansatz führt zu einer halbtransparenten blauen Form mit gebogener Unterseite.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen gebogenen Boden für ein DIV?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!