title: Drawing shapes in css responsively
body: <p>I have a 'div' with slight curve at the top. I tried and achieved using border. 
  But my concern is its not responsive. How to make it responsive. Any idea? Here is the code which i tried have a look at this.</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  
  div {
      position:relative;
      width:100%;
      float:left;
      background:green;
      height:80px;
      overflow:hidden
    }
  div:before {
      position: absolute;
      content: '';
      left: 0;
      right: 50%;
      border: 298px solid transparent;
      top: 0;
      border-top: 13px solid #fff;
  }
  </code></pre>
  
  <p>Also refer the <a href="https://jsfiddle.net/5qvbv8rt/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p><a href="https://i.stack.imgur.com/ewMiO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ewMiO.jpg" alt="enter image description here"></a></p>