Двойная изогнутая форма

В настоящее время я пытаюсь создать форму «волнистого призрачного дна». Эта форма содержит две двойные кривые:

Форма с двумя двойными кривыми

Хотя нижняя часть этого изображения, я думаю, изображает его в лучших изображениях.


Мой код

Моя текущая попытка генерировать эту форму заключалась в использовании псевдоэлементов и overflow: hidden , хотя это не позволяет использовать фон gradleиента (требуется простой фон):

Попытка 1 – Использование псевдоэлементов с переполнением скрыто

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

Попытка 2 – Использование псевдоэлементов с формой ‘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'; } тем .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'; } того, как .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'; } 
 

Попытка 3 – дополнительные элементы и тени в коробке

Я также недавно попробовал использовать тени и дополнительные элементы (с которыми мне было бы хорошо), но даже тогда я не могу создать их правильно:

 .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; } направо .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; } 
 

Ни один из этих подходов, по-видимому, не позволяет генерировать эту двойную изогнутую форму легко и требует «цветного фона блока»,

Примечание. Я бы не захотел прибегнуть к SVG, так как у меня есть 90% «общей формы», выполненной с использованием только чистого css, так что было бы хорошо / приятно завершить это без элемента svg


Внутренняя форма будет цветом блока, но граница не является обязательной / критичной в моем дизайне.

вот где я хотел бы добавить его в


Обновить

  • Это самое близкое, что мне удалось получить

Учитывая:

  • требуется количество кода
  • хлопот выравнивания двойных кривых

Похоже, что CSS не подходит, и SVG- путь более уместен . Чтобы проиллюстрировать это, см. Эти два fragmentа:

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

Вы должны использовать boxshadows и overflows, чтобы сделать эту форму.

 body {background:url('http://sofru.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; } 
 
  • Как изменить цвет изображения SVG с помощью CSS (замена изображения SVG jQuery)?
  • JPEG против PNG против BMP против GIF против SVG
  • Почему я не могу ссылаться на линейный gradleиент SVG, определенный во внешнем файле (сервер рисования)?
  • Нужны ли параметры SVG, такие как «xmlns» и «версия»?
  • SVG-анимация не работает на IE11
  • PNG против GIF против JPEG против SVG - Когда лучше всего использовать?
  • CSS: прежде чем на встроенном SVG
  • Форма треугольника с фоновым изображением
  • Есть ли способ использовать SVG как контент в псевдоэлементе: до или: после
  • Как сделать элемент разворачиваться или сжиматься до его родительского контейнера?
  • Приложение jquery не работает с элементом svg?
  • Давайте будем гением компьютера.