Comment créer un fond incurvé pour un DIV en utilisant CSS ?

Courber le bas d'un DIV vers l'intérieur avec CSS

Pour obtenir l'effet de fond incurvé comme illustré, une technique consiste à utiliser border-radius avec valeurs spécifiques. Voici comment l'implémenter :

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

Ce code crée un DIV rectangulaire avec un bord inférieur arrondi, comme indiqué :

Courbes transparentes

Alternativement, un dégradé radial peut être utilisé pour créer un fond transparent. courbe :

body {
  background: pink;
}

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

Cette approche donne une forme bleue semi-transparente avec un fond incurvé.
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!

css edge for using this border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn