title: Curved sail shape using HTML and CSS only?
body: <p>Is it possible to create the curved sail shape below using HTML and CSS only?</p>
  
  <p><img src="https://i.stack.imgur.com/KmHzq.jpg" alt="sail shape"></p>
  
  <p>I can see from <a href="https://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work">this answer</a> that I could create a straight-sided sail using:</p>
  
  <pre><code>#triangle {
      width: 0;
      height: 0;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
  }
  </code></pre>
  
  <p>which looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/XaCol.png" alt="straight sided sail"></p>
  
  <p>or I can get a bit closer with border radius:</p>
  
  <pre><code>#sail {
      background: #ff0000;
      width: 50px;
      height: 100px;
      border-top-right-radius: 50px 100px;
      -moz-border-radius-topright: 50px 100px;
      -webkit-border-top-right-radius: 50px 100px;
      -khtml-border-radius-topright: 50px 100px;
  }
  </code></pre>
  
  <p>which looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/u3kv4.png" alt="curved sail shape"></p>
  
  <p>but isn't quite as elegant as I'd like really.  The sail image at the top has a gentle, elegant curve to it.</p>
  
  <p>Can I do better without using images?</p>