Zig Zag Line across menu buttons CSS

Question

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:

Example

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?

score 3 · Accepted Answer · edited Dec 08 '14 at 05:10

3

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.

edited Dec 08 '14 at 05:10

Salman A

262,204
82
430
521

answered Dec 08 '14 at 04:37

jacob_b

200
2
3
12

I made it a stack snippet in your answer, edit that and overlay some menu items / arrange the triangles at the top :) – misterManSam Dec 08 '14 at 04:46
Thanks for the info. I'm still confused though. Is it supposed to be something like this? `.nav_item_1:before { background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0); background-position: left-bottom; background-repeat: repeat-x; background-size: 32px 32px; content: " "; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 32px; }` ? How can I adjust the size of the spikes? How can I change the spikes from pointing Down to Up? Thanks – CYBORG Dec 08 '14 at 05:02
1

@user3398196 Please take a look at my edit, hopefully it clears things up. Spike sized can be changed with the linear-gradient size and background-size. – jacob_b Dec 08 '14 at 05:08

Zig Zag Line across menu buttons CSS

1 Answers1