Courber le bord inférieur du div vers l'intérieur en utilisant CSS
P粉384366923
P粉384366923 2023-10-23 19:55:32
0
2
867

Je souhaite plier le bord inférieur de ce div/arrière-plan rectangulaire en utilisant CSS, le résultat est donc le suivant :

Est-ce que quelqu'un sait comment le mettre en œuvre ?


.curved {
  margin: 0 auto;
  height: 400px;
  background: lightblue;
  border-radius:0 0 200px 200px;
}
<div class="container">
  <div class="curved"></div>
</div>


P粉384366923
P粉384366923

répondre à tous(2)
P粉211600174

Vérifiez-le. J'ai créé ceci en utilisant le pseudo-élément :after. Cela aide si l’arrière-plan est de couleur unie.

.curved {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: lightblue;
  position: relative;
}
.curved:after{
  background: white;
  position: absolute;
  content: "";
  left:0;
  right:0;
  bottom: -25px;
  height: 50px;
  border-radius: 50% 50% 0 0;
}
P粉980815259

Utilisez simplement border-radius et comptez sur un certain débordement. Vous pouvez également envisager des pseudo-éléments pour éviter un balisage supplémentaire :

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: lightblue;
  position: relative;
  overflow: hidden;
}

.container:after {
  content: "";
  position: absolute;
  height: 80px;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  bottom: -25px;
  background: #fff;
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal