Решение SVG
Для решения подобного рода задач идеально подходит SVG. Графика на сайте должна быть векторной, так как векторное изображение имеет минимальный вес и по определению является адаптивным.
Для создания векторной фигуры вам понадобятся минимальные знания работы в векторном редакторе и несколько строчек кода SVG
Преобразуем растровую картинку в векторную:
Я постараюсь подробно изложить все шаги, чтобы даже люди, которые не работали в векторном редакторе, могли повторить эту работу на другом, своем примере.
Данная техника подойдёт и для других целей,- например для создания
патчей маски и clipPath
Растровую картинку можно сразу загрузить в векторный редактор, но при этом способе возникает много нюансов с преобразованиями, с возможными последующими проблемами масштабирования, стилизацией. Не будем пока рассматривать этот вариант, используем другую технику.
- Создание файла
svg
для загрузки растрового изображения в векторный
редактор.
Изображение имеет размеры 500x500px
, поэтому viewBox="0 0 500 500"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 500 500" >
<image xlink:href="https://i.stack.imgur.com/9ginL.png" x="2" width="99%" height="99%" />
</svg>
- Открываем этот файл svg с помощью векторного редактора
И с помощью инструмента рисование кривых Безье -
рисуем контур.

Для более точного повторения контура необходимо сделать узловые точки "автоматически сглаженными" Для этого удерживая shift
щёлкаем по выбранным узлам
И с помощью рычагов управления узловых точек добиваемся совпадения контура с изображением.
- Сохраняем файл в векторном редакторе в формате
*.svg
- Открываем файл в текстовом редакторе и копируем
<path>
Можно было бы использовать получившийся файл svg inkscape
, но он слишком перегружен служебной информацией, а нам нужна всего лишь одна строчка с патчем, которую можно использовать и для решения вопроса автора, а также в дальнейшем для создания масок и клип патчей.
Ниже пример с необходимыми контурами, но пока без фона
#Border {
fill:#0090D0;
stroke-width:2;
stroke:#0090D0;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 500 500" >
<path id="Border" d="m1.1 111.5 174.8 0.6c0 0 3.6 21.7 7.8 31.7 4.9 12 11.7 23.5 20 33.4 5.9 7.1 12.8 13.6 20.9 18.1 16.7 9.3 39 17 54.8 17L495.4 211.7 497 495 2 495Z" />
</svg>
.container {
width:25%;
height:auto;
background-image:url(https://i.stack.imgur.com/ikD0n.png);
background-size:cover;
}
#Border {
fill:#0090D0;
stroke-width:2;
stroke:#0090D0;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 500 500" >
<path transform="translate(0 35)" id="Border" d="m1.1 111.5 174.8 0.6c0 0 3.6 21.7 7.8 31.7 4.9 12 11.7 23.5 20 33.4 5.9 7.1 12.8 13.6 20.9 18.1 16.7 9.3 39 17 54.8 17L495.4 211.7 497 495 2 495Z" />
</svg>
</div>