communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Comment créer un fond incurvé pour un DIV en utilisant CSS ?

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

Linda Hamilton

Libérer： 2024-12-18 08:15:10

original

645 Les gens l'ont consulté

How to Create a Curved Bottom for a DIV Using 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;
}

Copier après la connexion

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

Copier après la connexion

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!

source：php.cn

Article précédent：Comment puis-je obtenir une hauteur égale pour les en-têtes H2 dans plusieurs conteneurs Flex à l'aide de CSS ? Article suivant：Comment puis-je supprimer les puces d’une liste non ordonnée à l’aide de CSS ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2224

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2369

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1978

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...