title: Create a bell shape with CSS
body: <p>I am playing with shapes in css and want to make a traditional bell shape (think Christmas bell). 
  Here's the general shape that I'm going for (though I really don't care about the balls on the top and bottom):</p>
  
  <p><img src="https://i.stack.imgur.com/5hlIK.gif" alt="enter image description here"></p>
  
  <p>Here's what I have so far:</p>
  
  <p><a href="http://jsfiddle.net/bhlaird/NeBtU/" rel="nofollow noreferrer">http://jsfiddle.net/bhlaird/NeBtU/</a></p>
  
  <pre><code>#bell { 
    left:300px;
      position: relative;
  }
  #bell:before, #bell:after {
      position: absolute;
    content: "";
      left: 50px; top: 0;
      width: 180px;
      height:400px;
      background: #d3d3d3;
      border-radius: 150px 150px 150px 20px;
      -webkit-transform: rotate(15deg);
      -webkit-transform-origin: 0 0;
  }
  #bell:after { 
      left: 0; 
      -webkit-transform: rotate(-15deg); 
      -webkit-transform-origin:100% 0;
      border-radius: 150px 150px 20px 150px;
  }
  </code></pre>
  
  <p>But, I'm not sure how to get that curved look on the side and bottom.  Any help would be appreciated.</p>
  
  <p>EDIT:  I've gotten closer by applying a radial-gradient to #bell:before and #bell:after.  This gives me the curve on the side, now I just need the curve on the bottom.  <a href="http://jsfiddle.net/NeBtU/2/" rel="nofollow noreferrer">http://jsfiddle.net/NeBtU/2/</a></p>
  
  <pre><code>#bell {
      left:300px;
      position: relative;
  }
  #bell:before, #bell:after {
      position: absolute;
      content:"";
      top: 0;
      width: 180px;
      height:400px;
      background: #d3d3d3;
  }
  #bell:before {
      left: 50px;
      border-radius: 150px 150px 20px 30px;
      -webkit-transform: rotate(15deg);
      -webkit-transform-origin: 0 0;
      transform: rotate(15deg);
      transform-origin: 0 0;
      background: radial-gradient(-50px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
      background: -webkit-radial-gradient(-50px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
  }
  #bell:after {
      left: 0;
      -webkit-transform: rotate(-15deg);
      -webkit-transform-origin:100% 0;
      transform: rotate(-15deg);
      transform-origin:100% 0;
      border-radius: 150px 150px 30px 20px;
      background: radial-gradient(230px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
      background: -webkit-radial-gradient(230px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
  }
  </code></pre>