Doppia forma curva

Attualmente sto tentando di generare una forma di “fondo ondulato spettrale”. Questa forma contiene due doppie curve:

Forma con due doppie curve

Anche se la parte inferiore di questa immagine la ritrae in immagini migliori.


Il mio codice

La mia corrente Tentativo di generare questa forma utilizzava pseudo elementi e overflow: hidden , sebbene ciò non consenta uno sfondo sfumato (richiederebbe uno sfondo semplice):

Tentativo 1: utilizzo di pseudo elementi con overflow nascosto

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

Tentativo 2: utilizzo di pseudo elementi con forma “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'; } 
 

Tentativo 3: elementi extra e ombre di riquadri

Ho anche provato di recente a utilizzare le ombre di riquadri e gli elementi aggiuntivi (con cui andrei bene), ma anche in questo caso, non riesco a crearlo correttamente:

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

Nessuno di questi approcci sembra consentire la generazione di questa doppia forma curva facilmente e richiederebbe uno ‘sfondo colorato a blocchi’

Nota: sarei riluttante a ricorrere a SVG poiché ho il 90% della “forma generale” completata usando solo puro css, quindi sarebbe bello / bello completare questo senza un elemento svg


La forma interna sarebbe un colore a blocchi, ma il bordo non è obbligatorio / critico nella mia progettazione.

questo è dove vorrei aggiungerlo


Aggiornare

  • Questo è il più vicino che sono stato in grado di ottenere

Considerando :

  • la quantità di codice necessaria
  • la seccatura di allineare le doppie curve

I CSS non sembrano il modo di andare qui e l’SVG è più appropriato . Per illustrare, vedi questi due frammenti:

SVG

DEMO

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

Dovresti usare boxshadows e overflow per ottenere quella forma.

 body {background:url('http://sofit.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; }