Rounded bottom div where curve angle is not responsive - css

Question

I'm using a clip-path to create a div with a rounded bottom, i.e.:
clip-path: ellipse(80% 60% at 50% 40%);
As the viewport width get smaller and smaller, the angle of the curve becomes more and more pronounced. I want the angle to stay the same no matter the width of the viewport. You can see the problem happening in this fiddle if you increase/decrease the viewport width: https://jsfiddle.net/jvorumk2/
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: ellipse(80% 60% at 50% 40%);
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>
If you make the width very narrow, you can see the curve becoming more and more round. If you make the viewport super wide, the curve becomes more flat.
I believe the answer is to change the 80% to a value with a fixed value such as 100rem, but when I do that, the clipping becomes visible at the top of the div on very wide monitors, unless I increase the 100 to a number so great that I flatten the curve at the bottom.
How can I achieve the same effect as seen in the fiddle, but keep the angle of the curve the same no matter how wide the viewport is, including very wide monitors (3840px)? I prefer not to use an SVG clip-path, but if that's the only way, I'm open to it.

Answer 1

You can try like below. A circle with a big radius (as big as you want) and you offset the center to keep the curve at the bottom:
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: circle(4000px at 50% calc(100% - 4000px));
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
margin:auto;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>
the same with ellips if you want to control both radius differently:
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: ellipse(4500px 4000px at 50% calc(100% - 4000px));
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
margin:auto;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>