Волны в CSS или SVG

#html #css #css3 #svg

Я пытаюсь создать округлые волны с помощью CSS, и у меня проблемы.
Сейчас я использую border-radius для создания волн, но они больше похожи на облака.
Я попытался использовать transform: translateZ(180deg);, но цвет div  перевернулся.   

Вот что я хочу получить: 

   

А здесь, что получилось у меня:    

   



.wave1 {
  left: 0%;
  margin-left: -50px;
}

.wave2 {
  margin-left: -69px;
}

.wave3 {
  margin-left: -69px;
}

.wave4 {
  margin-left: -69px;
}

.waves {
  width: 200%;
  clear: none;
  z-index: 100;
  position: absolute;
  margin-top: 200px;
  margin-left: -150px;
}

.waves div {
  float: left;
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent;
  border-radius: 70%/100px 100px 0 0;
  background-color: #fff;
}

.bottom-half {
  width: 100%;
  height: 50%;
  top: 70%;
  position: absolute;
  background-color: #fff;
}

.background-waves {
  width: 200%;
  clear: none;
  z-index: 50;
  position: absolute;
  margin-top: 190px;
  margin-left: 75px;
}

.bwave1 {
  left: 0%;
  margin-left: -50px;
}

.bwave2 {
  margin-left: -69px;
}

.bwave3 {
  margin-left: -69px;
}

.bwave4 {
  margin-left: -69px;
}

.background-waves div {
  float: left;
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent;
  border-radius: 70%/100px 100px 0 0;
  background-color: #fff;
  opacity: 0.5;
}

  

  

  

  

  



  

  

  

  

  





    

Ответы

Ответ 1

Я бы предложил использовать встроенный ручной SVG-код.   

Ваши фигуры довольно просты, так что волны с элементом SVG тоже просто сделать.    

Все, что вам нужно знать о path SVG есть на MDN.    

В следующем примере я использовал два элемента пути с квадратичными кривыми Безье,
чтобы сделать волны:    



svg{
  background:url('https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg')
no-repeat center center;
  background-size:cover;
  width:100%;
  display:block;
}





Источник: Waves in CSS or SVG @web-tiki