I want to bend the bottom edge of this rectangular div/background using CSS, so the result is like this:
Does anyone know how to implement it?
.curved { margin: 0 auto; height: 400px; background: lightblue; border-radius:0 0 200px 200px; }
<div class="container"> <div class="curved"></div> </div>
check. I created this using :after pseudo-element. It helps if the background is a solid color.
Just use
border-radius
and rely on some overflow. You can also consider pseudo-elements to avoid extra markup: