Make CSS triangle repeat vertically ( sawtooth pattern )

Question

I have navigation like:

------
|    |
|    |
|    |
|    |
|    |
------

And I would like:

------
|    |>
|    |>
|    |>
|    |>
|    |>
------

I decided it would be easiest to do this as separate divs, the second only concerned about repeating a pattern down the length of the nav.

I looked for help here but most articles I find are about horizontally repeating triangles. I like this solution http://jsfiddle.net/QeZG6/ , but I have no idea how to convert the code to stack right-facing triangles vertically.

Help pertaining to the answer and how to do linear gradients is appreciated

Answer 1

I think you are looking for something closer to

.pattern {
       background-image: linear-gradient(135deg, black 17px, transparent 18px), linear-gradient(45deg, black 17px, transparent 18px);
       background-size: 50px 50px;
       background-repeat: repeat-y;
       height: 200px;
}

Answer 2

Try something like

html {
    background-image: linear-gradient(319deg, transparent 30px,black 31px),
                      linear-gradient(39deg, black 16px, transparent 17px);
    background-size: 23px 40px;
    background-repeat: repeat-y;
}