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%);
}

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!


						

Erklärung dieser Website

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