Making jagged triangle border in CSS

Question

I have a shape with an edge like this in Photoshop:

Is it possible to make the repeated trian

Answer 1

You can create an individual triangle using CSS quite easily (just tweak border properties). In order for this to work you will need to generate quite a bit of markup yourself. I would recommend against this approach.

Instead you are likely better off using an individual image containing a single triangle (preferably a transparent .png) and then use background-image and background-repeat (repeat-x) properties to bind that to a div (your "border").

Unfortunately there is no yet a straight-forward way to achieve this using pure CSS.