Как адаптивно верстать рванные блоки?

Question

[Артем Колчин]

Как адаптивно верстать такие блоки? по идее мне нужно туда текст поместить, он будет по ширине и высоте при адаптиве схлапыаться, а рванные блоки нужны при любой ширине и высоте, пробовал с маской svg, но что то не то получается, через background тоже . Понятно что макет ужасный, но что есть то есть, может у кого был опыт?

Comments

[alexalexes]

А border-image пробовали?

[Ankhena]

Да, с виду border-image должно хватить

[Сергей delphinpro]

Ankhena, alexalexes, в уголках будут видны стыки

Answer 1

[Антон Антон]

можно начать отталкиваться от такого:
https://codepen.io/FragsterAt/pen/Byoxaga

Comments

[Артем Колчин]

Это если что то похожее делать, а если рвань нужна 1 в 1 то тут похоже только маской.

[Алексей Уколов]

До чего, блин, техника дошла...

[Антон Антон]

Артем Колчин, Если надо 1 в 1, то пусть автор дизайна нарисует на каждый пиксель ширины и высоты по картинке. А так - пусть предоставит параметры примененных фильтров (ну или если дизайн в фигме - то их там подсмотреть, вроде, можно), не вручную же он это рисовал.

[Сергей delphinpro]

Артем Колчин, вы преувеличиваете. Дизайнер использовал точно такой же фильтр для создания этого макета.