Comment puis-je créer des bords inférieurs incurvés dans des DIV à l'aide de CSS ?

Créer des bords inférieurs incurvés dans des DIV à l'aide de CSS

Pour obtenir le bord inférieur incurvé souhaité sur un div rectangle, suivez ces étapes :

Utiliser le border-radius

Le border-radius la propriété peut créer des coins arrondis. En spécifiant différentes valeurs de rayon pour les coins supérieur et inférieur, vous pouvez créer un bord inférieur incurvé.

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

Utilisation d'un dégradé radial

Si vous préférez un bord incurvé transparent forme, vous pouvez utiliser un dégradé radial :

body {
  background: pink;
}

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

Ces méthodes proposent deux manières différentes d'obtenir le bord inférieur incurvé souhaité, vous permettant de personnaliser l'effet en fonction vos besoins en matière de conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!