html - How to create uneven rounded sides on a div?

Question

I've been trying to make a DIV with uneven rounded sides like this:

I've checked some solutions and the closest I can get to it is by using border-radius. I've used:

border-bottom-left-radius: 80%50px;
border-bottom-right-radius: 30%30px; 

And this is what I've got:

How can this be done?

Answer 1

You can consider clip-path

.box {
  height: 200px;
  width: 200px;
  background: blue;
  -webkit-clip-path: circle(75% at 65% 10%);
  clip-path: circle(75% at 65% 10%);
}

<div class="box">

</div>