Double curved shape

Question

I am currently attempting to generate a 'wavy ghostly bottom' shape. This shape contains two double curves:

Although the bottom part of this image I think portrays it in better imagery.

---

My Code

My Current Attempt to generate this shape was using pseudo elements and overflow: hidden, although this does not allow for a gradient background (would require a plain background):

Attempt 1 - Using Pseudo Elements with overflow hidden

.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%;  }

<div class="bottom"></div>

Attempt 2 - Using Pseudo Elements with 's' shape

.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';    }

<div class="bottom"></div>

Attempt 3 - extra elements and box shadows

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:

.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;  }

<div class="bottom">      <div class="bottom-left"></div>      <div class="top"></div>      <div class="top-right"></div>      <div class="bigone"></div>  </div>

None of these approaches seem to allow the generation of this double curved shape easily, and would require a 'block coloured background'

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 without an svg element

---

The internal shape would be a block color, but the border isn't compulsory/critical in my design.

this is where I would like to add it to

---

Update

• This is closest I've been able to get

Answer 1

Considering :

• the amount of code needed
• the hassle of aligning double curves

CSS doesn't seem to be the way to go here and SVG way more appropriate. To illustrate, see these two snippets :

SVG

DEMO

/*** FOR THE DEMO **/  svg{      display:block;      width:70%;      margin:0 auto;      opacity:0.8;  }  body{      background: url('http://lorempixel.com/output/people-q-g-640-480-7.jpg');      background-size:cover;  }

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 80">      <path stroke-width="1" stroke="#000" fill="grey" d="M95 5 Q70 20 70 38 T50 65 Q55 50 30 40 T5 5z"/>  </svg>

CSS

DEMO (consider I only made one double curve on the right side of the shape)

.ghost {    position: relative;    width: 400px;    height: 300px;    margin: 0 auto;    overflow: hidden;  }  .ghost:before,  .ghost:after {    content: '';    position: absolute;  }  .ghost:before {    bottom: 0;    right: 50%;    width: 70%;    height: 30%;    transform-origin: 100% 100%;    transform: skewY(30deg) rotate(20deg);    box-shadow: -100px -100px 0px 99px #656565;    border-top-right-radius: 30% 100%;  }  .ghost:after {    top: 0;    right: 0;    transform-origin: 100% 0;    transform: skewX(-10deg) rotate(-20deg);    box-shadow: none;    height: 107px;    width: 173px;    border-top-left-radius: 90% 100%;    box-shadow: -30px -30px 0px 29px #656565, 60px -110px 0px 109px #656565;  }

<div class="ghost">  </div>

Note that I didn't list out the advantages of using an svg in this case (responsiveness, quality of output, curve control, border, border color/opacity, fill colour/opacity, transparency, maintainability, amount of time to build the shape...)