Struggling to achieve the perfect curve at the bottom of my hero image. Any suggestions on how to accomplish this would be greatly appreciated.
I am aiming for something like this: https://i.stack.imgur.com/Emxfc.png
body {
margin: 0;
background: lightblue;
}
div#hero {
display: flex;
flex: 1;
position: relative;
height: 50vh;
background-image: url('https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg');
width: 100%;
border-bottom-left-radius: 130% 600px;
border-bottom-right-radius: 130% 600px;
margin-left: -2em;
padding-right: 4em;
}
.button {
height: 60px;
width: 180px;
padding: 10px;
border-radius: 5px;
background-color: blue;
margin: -25px auto;
align-self: flex-end;
}