Как сделать эффект рваного фото?

Question

[pilot1303]

Как сделать эффект рваного фото как в примере?

Comments

[twobomb]

Маска clip-path или svg ?

[pilot1303]

twobomb, есть только шаблон, маску не использовал

[twobomb]

pilot1303, ну используй

[Pavelsha]

Наложить маску (Ваш КЭП).
Я бы сделал это при подготовке/ заливке фото на сайт. Умеет практически любой редактор/ просмоторщик фото. Можно настроить обработку в пакетном режиме.
Или нужно иметь эти фото на сайте в целом виде (без обрезанных краев)?

Тогда W3.org
CSS Masking Level 1 и CSS Shapes Level 2

[pilot1303]

Нужно чтобы это обрабатывалось на сайте

[pilot1303]

pavelsha twobomb спасибо

[Pavelsha]

pilot1303,
Режим формалиста и зануды ON: CSS и HTML - это не на сервере, это в браузере клиента (посетителя). Браузеры могут не поддерживать или реализовывать как-то странно некоторые теги CSS / HTML.
не забудь протестировать свою реализацию.

Есть третий вариант:
Накладывать программно маску на изображение при сборке странице на стороне веб-сервера

[alexalexes]

Если фон вокруг фотографии однотоновый, то можно поверх img добавить div с верхним и нижним фоном в виде png с прозрачными пикселями на месте рваного профиля. Ну, и повторить фон через repeat-x. Если нужен оригинальный профиль, можно сдвигать x с помощью JS на произвольное значение.

[Pavel-ww]

Есть еще вариант border-image

[twobomb]

Ну раз упарываться так вообще делать на канвасе функционал с рандомным формированием края и обрезкой.
А если нужно сервере то можно через имагик, пример для пхп