Рваные края background

#html #вёрстка #css

Друзья! Как реализовать на css данный эффект? Верх заливаем цветом, низ картинка
    

Ответы

Ответ 1

Этот рваный кусочек шириной ~ 30px добавляется бэкграундом к псевдоэлементу, которому
задается абсолютная отрицательная позиция.
Дабы не плодить лишние дивы.


Ответ 2

Добрый вечер. Обычно такие эффекты реализуются повторением одного и того же элемента.
То есть рисуется кусочек повторяющийся и подставляем к нужному элементу свойство:
backgound: url(example/img.gif) repeat x;

где url(..) - путь к картинке, repeat x / repeat y / repeat - повторение фона по
горизонтали / вертикали / во всех направлениях


Ответ 3

Вот пример вертикального div'а, который залит цветом #E1DFE0