title: create a logo with css3
body: <p>I would like to create a Vodafone logo with css like this one: 
  <img src="https://i.stack.imgur.com/WkuKd.jpg" alt="enter image description here"></p>
  
  <p>I know some people are able to draw anything with css. I can't figure out how to make the tear drop shape. This is what I have as far as now: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#logoMain {
    width: 100px;
    height: 100px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 50px 0px #999 inset;
    position: relative;
  }
  
  #logoMainafter {
    width: 100px;
    height: 100px;
    margin-top: -35px;
    margin-left: 55px;
    display: block;
    border-radius: 50%;
    background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
    -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    -webkit-filter: blur(10px);
  }
  
  #logoInside {
    width: 50px;
    height: 50px;
    margin: 24px;
    background-color: #fe0000;
    border: 1px solid red;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 3px #a80000 inset;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="logoMain"&gt;
      &lt;div id="logoInside"&gt;&lt;/div&gt;
      &lt;div id="logoMainafter"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone give me any ideas how to create this unusual shape?</p>