This question already has an answer here:
I was trying to create something like this.
See the below section which has a radial top, I tried this having an extra after or before pseudo-element but it was not the same, I am not able to create the exact same curve.
Have a look on the code,
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.radial {
position: relative;
}
.radial:after {
position: absolute;
content: "";
height: 500px;
width: 100%;
background: white;
z-index: 9;
border-radius: 0 0 75% 75%;
border-style: solid;
border-width: 0 0 100px 0;
border-color: red;
}
.radial.bottom:after {
bottom: -60%;
}<section class="banner radial bottom" style="background-color: #888; min-height: 200px;"><div style="height: 500px; background: white;"></div></section><section style="background: red; height: 1000px;" class=""></section>I have an instinct that it can be done with clip paths, but not sure, tried as well but not able to achieve it. Is it possible to create this effect by CSS, I don't want to use image for the same.