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

229

28 марта 2018, 03:13

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

Answer 1

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

body { 
  margin: 0; 
} 
 
.bg { 
  width: 1020px; 
  background: linear-gradient(0deg, #ff0777, #7c00ff); 
} 
 
.clip { 
  height: 300px; 
  background-color: #fff; 
  clip-path: url(#wave); 
}

<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <defs> 
    <clipPath id="wave"> 
      <path fill="dodgerblue" d="m 0,0 v 127.45743 l 76.200758,24.61975 71.326822,16.40863 c 48.77893,8.55961 95.53725,9.44091 141.41698,6.98355 121.77621,-12.67261 245.5939,-31.27999 370.11305,-49.43849 21.66434,-3.15929 43.34992,-4.50925 65.04967,-7.73936 61.18759,-8.39196 118.10962,-6.16958 174.69798,-0.76382 55.25083,6.05784 98.89736,20.04482 123.08504,43.21074 l 0.3274,-161.16733812 z"/> 
    </clipPath> 
  </defs> 
</svg> 
 
<div class=bg> 
  <div class=clip></div> 
</div>

Answer 2

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

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

<svg width="800" height="500" viewBox="0 0 1000 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <path fill="dodgerblue" d="m 0,0 v 127.45743 l 76.200758,24.61975 71.326822,16.40863 c 48.77893,8.55961 95.53725,9.44091 141.41698,6.98355 121.77621,-12.67261 245.5939,-31.27999 370.11305,-49.43849 21.66434,-3.15929 43.34992,-4.50925 65.04967,-7.73936 61.18759,-8.39196 118.10962,-6.16958 174.69798,-0.76382 55.25083,6.05784 98.89736,20.04482 123.08504,43.21074 l 0.3274,-161.16733812 z"/> 
</svg>

Answer 3

Писал ответ два дня, никак не мог заставить работать градиент в сниппете под морской волной. Приложение прекрасно работает во всех современных браузерах, но не хочет работать градиент только здесь в сниппете.
Решение полностью адаптивно. Скачайте файл и у вас будет всё работать! 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; 
  
}

<div class="comm"> </div> 
<div class="container">  
<svg xmlns:svg="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1022 189"  > 
<defs> 
 <clipPath id="myPath"> 
 <path  d="M0.1-0.9-0.5 124.7c0 0 27.5 11.4 41.5 16.3 16.4 5.8 32.9 11.5 49.8 15.7 21.5 5.4 43.4 9.2 65.4 12.1 22 2.9 44.2 4.6 66.4 5.4 24.4 0.8 48.9 0.4 73.3-0.9 22.2-1.2 44.3-3.7 66.3-6.1 20.4-2.3 40.8-5 61.1-7.9 23-3.2 46-6.9 69-10.5 18.1-2.8 36.1-5.9 54.1-8.7 19.8-3 39.6-5.9 59.4-8.7 19.2-2.7 38.4-5.5 57.6-7.9 15.4-1.9 30.8-3.7 46.3-5.2 17.5-1.8 35-3.6 52.6-4.6 17.4-1 24.8-1.8 52.2-1.5 25.1 0.2 31.4 0.8 47.1 1.7 14 0.8 28 1.6 41.9 3.5 31.2 4.3 53.1 10.9 53.1 10.9 0 0 30.1 8.8 44.5 14.9 7.3 3.1 21.1 11.1 21.1 11.1l0.3-155z" /> 
  </clipPath> 
</defs> 
<rect width="100%" height="100%" fill="#C8EFD0"  clip-path="url(#myPath)" /> 
</svg> 
</div>