title: Pointy leaf shape
body: <p>I am trying to create a pointy leaf shape in CSS, as in the image:</p>
  <img src="https://i.imgur.com/KoN0PGo.jpg">
  <p>I managed to figure out a way to create a default leaf shape, but have some issues in finding out how to create the pointy corners. I am only looking for ways of creating half of the leaf, as I intend to draw the image to animate it, and each half of the leaves will be independent. Is there a way to create that shape using CSS?</p>
  <p>Default leaf shape: <a href="https://jsfiddle.net/xwvyo1c5/" rel="nofollow noreferrer">https://jsfiddle.net/xwvyo1c5/</a></p>
  <pre><code>.leaf { 
    width: 100px; height: 100px;
    background-color: #A0DE21; 
    -moz-border-radius: 100px 0px;
    -webkit-border-radius: 100px 0px;
    border-radius: 100px 0px;
  }
  </code></pre>