Как замостить фон картинкой под случайным прямым углом?

Question

[Praytic]

Есть картинка, нужно замостить ею фон так, чтобы они все были не под одним углом, а под разными (90, 180, 270 или 0). Как это можно реализовать?

Answer 1

[Даша Циклаури]

либо создать контейнер (overflow:hidden), в него класть inline элементы с заданным фоном, создать заранее 4 класса css, ну и заполнить, логику только додумать (там ширина/высота/паддинги):

.rot_90d{
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

Answer 2

[Константин Китманов]

Либо на сервере генерировать предварительно, либо создавать элемент canvas, помещать его подо все остальное и рисовать на нем эту картинку необходимое количество раз со случайными поворотами.