title: Curved shapes using CSS
body: <p>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: </p>
  
  <p><a href="https://www.behance.net/gallery/28594475/Accrosport" rel="nofollow">https://www.behance.net/gallery/28594475/Accrosport</a></p>
  
  <p>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:</p>
  
  <p><a href="http://codepen.io/anon/pen/GpRQaZ" rel="nofollow">http://codepen.io/anon/pen/GpRQaZ</a></p>
  
  <p>css: </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Thanks in advance</p>