title: Header with curved pointed bottom
body: <p>I need to create the bluey/green area that is shown in the picture below. It has angled sides coming down to a point that has a slight curve.</p>
  
  <p>What is the best way to achieve this using <em>CSS</em>? I need to support IE9+ or IE10+ if IE9 support is not possible.</p>
  
  <p>I have started a basic <a href="http://jsbin.com/quxohogohi/edit?html,css,output" rel="noreferrer">demo here</a> - (Don't need the content within the bluey-green area)</p>
  
  <p><a href="https://i.stack.imgur.com/Rr9Sv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Rr9Sv.png" alt="header with curved pointed bottom"></a></p>