How to make zig-zag borders?

[Darijus]

I am trying to make navigation buttons which would have zig-zag borders on hover.
What I am trying to make: http://s27.postimg.org/xhzfmq4b3/zigzag.png

I was looking for some tutorials and I could only find how to make these borders on top and bottom of the element. However, nobody done left and right ones.

How do I make the borders exactly like in my picture?

Thanks!

[timbarden]

You could use :before and :after pseudo elements for the left- and right-hand side respectively, with repeat-y background images of the triangle.

[Paulie_D]

Sometimes the best options is a background image.

Or a border-image…simpler all round than messing around with pseudo-elements (or actual elements) just to make something with pure CS.

[Author]

Posts