title: Make CSS triangle repeat vertically ( sawtooth pattern )
body: <p>I have navigation like:</p>
  
  <pre><code>------
  |    |
  |    |
  |    |
  |    |
  |    |
  ------
  </code></pre>
  
  <p>And I would like:</p>
  
  <pre><code>------
  |    |&gt;
  |    |&gt;
  |    |&gt;
  |    |&gt;
  |    |&gt;
  ------
  </code></pre>
  
  <p>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.</p>
  
  <p>I looked for help here but most articles I find are about horizontally repeating triangles.  I like this solution <a href="http://jsfiddle.net/QeZG6/" rel="nofollow">http://jsfiddle.net/QeZG6/</a> ,
  but I have no idea how to convert the code to stack right-facing triangles vertically.</p>
  
  <p>Help pertaining to the answer and how to do linear gradients is appreciated</p>