Рваный фон с тенью.Как сверстать?

[forest79]

Вот скрин фона http://c2n.me/3pebcoV.

Рваные края со всех сторон центрального блока. Плюс еще и тень от него. 

Голову сломал, не могу придумать как сверстать.

Вырезанные куски с предварительными наметками тут

Если бы не тень , то как-то бы склеил из 3-х частей. Но тень подчеркивает прямые края блоков.

Edited October 22, 2015 by forest79

[wwt]

самое простое рваный край с тенью делать картинкой с прозрачностью.

[Great Rash]

Такое только картинками.

[DivMan]

Такое только картинками.

А на SVG?

[Great Rash]

"Рваный фон" на SVG? Не, ну теоретически его можно сделать, но вес такого пути (а там контрольных точек будет over 9000) будет в разы больше чем PNG. А уж если PNG грамотно затайлить, то SVG вообще будет курить в сторонке.

[forest79]

самое простое рваный край с тенью делать картинкой с прозрачностью.

Спасибо за совет. Не стал мудрить с CSS тенями, т.к. не получалось из-за рваных краев. Вырезал края вместе с тенью. Структура получилась. Осталось сами куски изображений подкорректировать, чтобы стыки в глаза не бросались. Получилось пока что так