Wie kann ich mit CSS gebogene Unterkanten in DIVs erstellen?

Gebogene Unterkanten in DIVs mit CSS erstellen

Um die gewünschte gekrümmte Unterkante auf einem Rechteck-Div zu erreichen, befolgen Sie diese Schritte:

Border-Radius verwenden

Die Border-Radius-Eigenschaft kann abgerundete Ecken erzeugen. Durch Angabe unterschiedlicher Radiuswerte für die oberen und unteren Ecken können Sie eine gekrümmte Unterkante erstellen.

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

Radialer Farbverlauf verwenden

Wenn Sie eine transparente Kurve bevorzugen Form können Sie einen radialen Farbverlauf verwenden:

body {
  background: pink;
}

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

Diese Methoden bieten zwei verschiedene Möglichkeiten, um die gewünschte gekrümmte Unterkante zu erzielen, sodass Sie dies erreichen können Passen Sie den Effekt an Ihre Designanforderungen an.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS gebogene Unterkanten in DIVs erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!