Forma doble curvada

Actualmente estoy intentando generar una forma de ‘fondo fantasmal ondulado’. Esta forma contiene dos curvas dobles:

Forma con dos curvas dobles

Aunque la parte inferior de esta imagen creo que la retrata en mejores imágenes.


Mi código

Mi bash actual de generar esta forma estaba usando pseudoelementos y overflow: hidden , aunque esto no permite un fondo degradado (requeriría un fondo plano):

Intento 1 – Uso de Pseudo Elements con desbordamiento oculto

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

Intento 2 – Uso de pseudo elementos con forma de “s”

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

Intento 3: elementos adicionales y sombras de caja

Recientemente también he intentado usar sombras de caja y elementos adicionales (con los que estaría bien), pero incluso así, no puedo crearlo correctamente:

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

Ninguno de estos enfoques parece permitir la generación de esta forma de doble curva fácilmente, y requeriría un “fondo de color de bloque”

Nota: Sería reacio a recurrir a SVG ya que tengo el 90% de la ‘forma general’ completada usando solo CSS puro, por lo que sería bueno / agradable completar esto sin un elemento svg


La forma interna sería un color de bloque, pero el borde no es obligatorio / crítico en mi diseño.

aquí es donde me gustaría agregarlo a


Actualizar

  • Esto es lo más cercano que he podido conseguir

Considerando :

  • la cantidad de código necesario
  • la molestia de alinear curvas dobles

CSS no parece ser el camino a seguir aquí y SVG es mucho más apropiado . Para ilustrar, vea estos dos fragmentos:

SVG

MANIFESTACIÓN

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

Deberías usar sombras y desbordamientos para crear esa forma.

 body {background:url('http://sofes.miximages.com/css/33c9f33218a6cab6054375fb76129a80.jpeg'); background-size: cover;} div { height: 100px; width: 200px; overflow: hidden; position: relative; -webkit-transform: scale(1,1.1); -moz-transform: scale(1,1.1); -ms-transform: scale(1,1.1); -o-transform: scale(1,1.1); transform: scale(1,1.1); } div:before { height: 80px; width: 100px; border-radius: 50% / 50%; box-shadow: 40px -11px 0 -20px white, 42px -22px 0 -10px white, 50px -28px 0 -8px white, 36px -95px 0 20px white; content: ""; position: absolute; -webkit-transform: scale(0.9,1.1); -moz-transform: scale(0.9,1.1); -ms-transform: scale(0.9,1.1); -o-transform: scale(0.9,1.1); transform: scale(0.9,1.1); top: 50%; left: -10px; } div:after { height: 70px; width: 120px; border-radius: 50%; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg); box-shadow: ; content: ""; position: absolute; top: -1%; box-shadow: -1px -28px 0 5px white; right: -35px; }