Rectangle with strange rounded bottom side

Question

I've been reading about how to make a rectangle with the bottom side rounded. I found that I can make a rectangle rounded side, not rounded corners.

.figure {
  height: 400px;
  width: 200px;
  background-color: black;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px;
}

<div class="figure"></div>

But I can't make it look like this image.

I really appreciate If you guys could help me. Thanks!

Answer 1

SVG:

The shape was rebuilt on Adobe Illustrator (free alternative: Inkscape) and got improved since it wasn't symmetrical as you see in the following picture comparing the original image behind with the pink line:

SVG produces more code lines but allows you to build unique and detailed shapes (it's worth in this case since it's a big element with a great importance on the page layout).

body {
  margin: 0px;
  font-size: 1.4vw;
  font-family: arial, sans-serif;
  color: white;
  background: #f4f4f4;
}

#header {
  position: relative;
  height: auto;
  width: 100%;
  text-align: center;
}

svg {
  max-width: 100%;
}

path {
  fill: #4f3b6a; 
}

span {
  color: white;
  position: absolute;
  left:0;
  right:0;
  margin: auto;
  bottom: 16%;
}

<div id=header>

<svg x="0px" y="0px" viewBox="0 0 1920 180">
<path d="M0,0c0,0,0.085,57.702,0.085,77.429c42.108,3.792,84.187,7.988,126.333,11.294c100.844,7.912,201.861,12.082,302.976,14.923
	c132.122,3.715,258.477,4.525,390.619,2.69c3.054-0.043,4.721,1.115,6.438,3.565c10.835,15.457,22.122,30.6,32.771,46.182
	c11.62,17,26.813,23.914,47.781,23.914c2.441,0,102.813,0,105.994,0c20.968,0,36.161-6.914,47.781-23.914
	c10.647-15.582,21.937-30.725,32.771-46.182c1.719-2.451,3.386-3.609,6.438-3.566c132.145,1.835,258.497,1.021,390.618-2.689
	c101.113-2.842,202.133-7.013,302.977-14.923c42.146-3.307,84.225-7.503,126.333-11.294C1919.915,57.702,1920,0,1920,0H0z"/>
</svg>
  
<span>DESTINOS</span>

</div>