Courber le bas du div vers l'intérieur en utilisant CSS
P粉617237727
2023-08-24 21:15:13
<p>Je souhaite plier le bord inférieur de ce div/arrière-plan rectangulaire à l'aide de CSS, le résultat est donc le suivant : </p>
<p>
Est-ce que quelqu'un sait comment le mettre en œuvre ? </p>
<p>
<pre class="brush:css;toolbar:false;">.curved {
marge : 0 automatique ;
hauteur : 400px ;
fond : bleu clair ;
border-radius:0 0 200px 200px;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="curved"></div>
</div></pre>
</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }Utilisez simplement
border-radiuset 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; }