Zig Zag Line across menu buttons CSS

I've done some research into this but can't seem to find the right info. I'm trying to get a zigzag line across the top of my nav bar:

I've created the above image to explain things very simply. The top zigzag is an image and I'd like to get the same sort of effect on the top of the nav bar as shown in the blue selected are in the image. I simply used photoshop to copy the effect and edit in onto the nav bar.

Is there a way I can add CSS to the menu items to give this effect?

If not how can I get it there?

If I understand you correctly you would want to be making lots of little triangles using css. If so this is a great article on it here Now basically it uses gradients to make back to back triangles. The js fiddle for it can be found here

ul li {
    display: inline;
    position: relative;
    padding: 16px 8px 8px 8px;
    background: #dddccf;
}
ul li:before {
    background: linear-gradient(145deg, #ffffff 8px, transparent 0), linear-gradient(-145deg, #ffffff 8px, transparent 0);
    background-repeat: repeat-x;
    background-size: 16px 16px;
    content: " ";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
    background-position: left-bottom;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

This should fix the problem. The size of the triangles can be adjusted with the background-size and the linear gradient.