Картинка и clip-path

#css #svg #clip_path

Помогите обрезать изображение в форме "волны" с помощью clip-path. Внизу пример как
хотелось бы. 


    

Ответы

Ответ 1

Писал ответ два дня, никак не мог заставить работать градиент в сниппете под морской
волной. Приложение прекрасно работает во всех современных браузерах, но не хочет работать
градиент только здесь в сниппете.
Решение полностью адаптивно.
Скачайте файл и у вас будет всё работать! 

clip-path с помощью правил CSS рисует (вырезает) только прямыми отрезками.
Поддержки кривых  в css пока нет. Поэтому для реализации вашей "волны" без clipPath
SVG не обойтись.  Зато решение будет полностью адаптивно!    



   * {
margin:0;
padding:0;
}
.comm { 
 width:100%;
 height:100%;
 position: relative;
 background: linear-gradient(to top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); 
 }
.container {
width:100%;
height:189;
 position: absolute;
 top:0;
 
}
 
 




Ответ 2

Пишешь путь для волны в SVG, обозначаешь его как  и используешь его потом
в CSS. Позаимствовал код волны из соседнего примера.



body {
  margin: 0;
}

.bg {
  width: 1020px;
  background: linear-gradient(0deg, #ff0777, #7c00ff);
}

.clip {
  height: 300px;
  background-color: #fff;
  clip-path: url(#wave);
}



  




Ответ 3

Это можно (в данном случае path) реализовать с помощью любого векторного редактора(Inkscape,
Illustrator 
etc.)



* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}