Как сделать фон "елочкой"(зигзагами) с помощью градиента css?

Question

[yaroslavgrishajev]

Доброго времени суток!

В общем столкнулся с такой проблемой. Необходимо сделать такой вот фон:


Можно, конечно, с помощью просто картинки, но хотелось бы понять как это сделать с помощью градиента.
Пока что я состряпал такой вот градиент:

jsfiddle.net/j9f9Lu7u

однако, такой вариант нормально размножается только по вертикали ( jsfiddle.net/bko5h6hz ), а по горизонтали - как-то не очень ( jsfiddle.net/xro0uak2 ).

Оно то и понятно почему - реальная ширина фона меньше визуальной в 2 раза.

На сколько я знаю, вариантов отступа от фона вроде нет, чтобы он размножался через промежуток например...

В общем, какие варианты могут быть правильного размножения такого градиента и по X, и Y?
Либо может есть другой подход к построению самого градиента?
Заранее благодарен за помощь!

Answer 1

[Rad1calDreamer]

lea.verou.me/css3patterns/#zig-zag

Comments

[yaroslavgrishajev]

Спасибо! Но такой градиент я могу сделать - он делается и выглядит иначе, чем то, что мне нужно.
В нем верх и низ градиента как бы не пересекаются, а в моем "елочка" более частая. Чтобы он стал похож на то, что мне нужно я поднимал 2 нижних градиента по оси Y, но тогда он плохо по этой же оси размножался ( jsfiddle.net/exfatx5m ) - возникала линия "пробела" между повторами.
Если есть способ убрать ее, то это было бы также ответом на мой вопрос:)

Answer 2

[Евгений Петров]

Ну просто подобрать проценты тщательней, вот и всё jsfiddle.net/petroveg/h7qzchs3
Вы разве не поняли смысл примера? Там есть смещение.

Comments

[yaroslavgrishajev]

Честно говоря не понял сразу... только разбираюсь в вопросе. Огромное спасибо!