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

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

Shape with two double curves

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

Мой код

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

Попытка 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%;
}
<div class="bottom"></div>

Ответы

Ответ 1

Учитывая:

  • количество необходимого кода
  • сложность выравнивания двойных кривых

CSS, похоже, не может быть здесь, а SVG более подходящим. Для иллюстрации см. Следующие два фрагмента:

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>

Ответ 2

Вы должны использовать boxshadows и overflows для создания этой формы.

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>