css - tag - Forma doble curvada

javascript title

Question

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

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

Mi código

Mi intento 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%;
}

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

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

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

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

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

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

Answer 1

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

body {background:url(''http://whofortedblog.com/wp-content/uploads/2013/01/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;
}

<div></div>

¡Sin duda puede mejorar esta versión usando buenos valores de posición! En cualquier caso, casi nunca deberías usar esta solución. la mejor opción en mi opinión sería una imagen png o SVG.

Trabajando:

div {
height: 100px;
width: 200px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
div:before {
height: 80px;
width: 100px;
border-radius: 50% / 50%;
background-color: red;
box-shadow: 40px -9px 0 -20px blue, 42px -20px 0 -10px pink, 50px -25px 0 -8px plum, 37px -95px 0 20px green;
content: "";
position: absolute;
top: 50%;
left: -10px;
}
div:after {
height: 70px;
width: 120px;
border-radius: 50%;
background-color: rgba(255, 215, 0, 0.6);
-webkot-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
transform: rotate(-35deg);
box-shadow: ;
content: "";
position: absolute;
top: -1%;
box-shadow: -4px -27px 0 5px rgba(0, 255, 215, 0.6);
right: -44px;
}

<div></div>

Answer 2

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-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 (considere que solo hice una curva doble en el lado derecho de la forma)

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

Tenga en cuenta que no enumeré las ventajas de usar svg en este caso (capacidad de respuesta, calidad de salida, control de curva, borde, color / opacidad de borde, color / opacidad de relleno, transparencia, capacidad de mantenimiento, cantidad de tiempo para construir la forma ...)