title: Double curved shape
body: <p>I am currently attempting to generate a 'wavy ghostly bottom' shape. This shape contains two double curves:</p>
  
  <p><img src="https://i.stack.imgur.com/as8RC.png" alt="Shape with two double curves"></p>
  
  <p>Although the bottom part of <a href="http://images.clipartpanda.com/ghost-clip-art-castle-ghost-clipart1.jpg" rel="nofollow noreferrer">this image</a> I think portrays it in better imagery.</p>
  
  <hr>
  
  <p><strong>My Code</strong></p>
  
  <p>My Current Attempt to generate this shape was using pseudo elements and <code>overflow: hidden</code>, although this does not allow for a gradient background (would require a plain background):</p>
  
  <p><em>Attempt 1 - Using Pseudo Elements with overflow hidden</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bottom {
    height: 300px;
    width: 300px;
    background: lightgray;
    position: relative;
    overflow: hidden;
    margin-top:-150px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  .bottom:before, .bottom:after{
    position: absolute;
    content: "";
    background: white; 
  }
  .bottom:before {
      height: 150%;
    width: 150%; 
    top: 50%;
    border-radius:50%;
    left: -45%;
  }
  
  .bottom:after {
      height: 200%;
    width: 100%; 
    bottom: -40%;
    border-radius:50%;
    left: 90%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bottom"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Attempt 2 - Using Pseudo Elements with 's' shape</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bottom {
    background: lightgray;
    width: 300px;
    height: 300px;
    position: relative;
    overflow:hidden;
    color:white;
    border-radius:0 100% 0 100%;
  }
  .bottom:before{
    content:"S";
    position:absolute;
    height:100%;
    width:100%;
    top:-100%;
    left:-75%;
    font-size:60em;
    font-family: 'arial';
    }
  
  .bottom:after{
    content:"S";
    position:absolute;
    height:100%;
    width:100%;
    top:-150%;
    left:-75%;
    font-size:60em;
    font-family: 'arial';
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bottom"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Attempt 3 - extra elements and box shadows</em></p>
  
  <p>I also have recently tried using box shadows and extra elements (which i would be ok with), but even then, I can't create it properly: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bottom {
      height:300px;
      width:300px;
      position:relative;
      overflow:hidden;
  }
  .bottom-left {
      position:absolute;
      top:50%;
      left:-50%;
      height:100%;
      width:100%;
      border-radius:50%;
      box-shadow: inset -35px 35px 0px -24px rgba(50, 50, 50, 1);
      z-index:8;
      background:white;
  }
  .top {
      position:absolute;
      height:100%;
      top:-35%;
      left:0;
      width:50%;
      border-radius:50%;
      z-index:8;
      background:gray;
      box-shadow:inset 35px -35px 0px -24px rgba(50, 50, 50, 1);
  }
  .top-right {
      position:absolute;
      top:-80%;
      left:45%;
      height:120%;
      width:100%;
      border-radius:50%;
      box-shadow:inset 35px -35px 0px -24px rgba(50, 50, 50, 1);
      border:20px solid gray;
  }
  .bigone {
      position:absolute;
      top:0;
      left:-20%;
      height:105%;
      width:100%;
      border-radius:50%;
      box-shadow:inset -35px -35px 0px -24px rgba(50, 50, 50, 1);
      -webkit-transform:rotate(-30deg);
      transform:rotate(-30deg);
      -webkit-transform-origin:center center;
      transform-origin:center center;
      background:gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bottom"&gt;
      &lt;div class="bottom-left"&gt;&lt;/div&gt;
      &lt;div class="top"&gt;&lt;/div&gt;
      &lt;div class="top-right"&gt;&lt;/div&gt;
      &lt;div class="bigone"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>None of these approaches seem to allow the generation of this double curved shape easily, and would require a 'block coloured background'</p>
  
  <p>Note: I would be reluctant to resort to SVG since I have 90% of the 'overall shape' completed using just pure css, so It would be good/nice to complete this <strong>without an svg element</strong></p>
  
  <hr>
  
  <p>The internal shape would be a block color, but the border isn't compulsory/critical in my design.  </p>
  
  <p><a href="http://jsfiddle.net/jbutler483/x65qkh3k/22/" rel="nofollow noreferrer">this is where I would like to add it to</a></p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <ul>
  <li><a href="http://jsfiddle.net/jbutler483/r3cn1ea0/2/" rel="nofollow noreferrer">This is closest I've been able to get</a></li>
  </ul>