Curved shapes using CSS

Question

In a world where layouts is nothing more than squares and grids, I found this layout concept and I tought that curved layer in the first section an amazing idea to create something different:

https://www.behance.net/gallery/28594475/Accrosport

But now I'm in doubt. How can I do it with css? Anyone has an idea in how to do it and recreate a simple example? I tried to recreate that using border-radius, but it got a bit strange:

http://codepen.io/anon/pen/GpRQaZ

css:

.curved {
  position: relative;
  width: 100%;
  height: 600px;
  margin: 20px 0;
  background-image: url('http://www.erikaalkblog.com.br/wp-content/uploads/2015/07/yoga2.jpg');
  background-size: cover;
  border-radius: 250% 250% 250% 250% / 0% 0% 20% 20%;
  color: white;
  text-align: center;
  text-indent: .1em;
}

Thanks in advance

Answer 1

From your example this is what they are using:

.curved {
  position: relative;
  width: 100%;
  height: 600px;
  margin: 20px 0;
  background-image: url('http://www.erikaalkblog.com.br/wp-content/uploads/2015/07/yoga2.jpg');
  background-size: cover;
  border-bottom-right-radius: 50% 7%;
  border-bottom-left-radius: 50% 7%;
  color: white;
  text-align: center;
  text-indent: .1em;
}

<div class="curved"></div>