Angled border separating li elements

Question

I want to create horizontal navigation using li elements. Li elements would be separated by border angled 45 degrees. I found this example:

enter image description here

This looks great, but how to get this?

Here is what you are looking: http://stackoverflow.com/questions/10568334/css-to-produce-adjacent-divs-with-angled-borders — Hammad, Mar 21 '14 at 19:09
Found this earlier, but I can't manage to apply angle to left side of first li node, and for the right side of last li node... — Ivan Pandžić, Mar 21 '14 at 19:17

newTag · Accepted Answer · 2014-03-21T19:25:40.853

Using CSS:

   li {
        float: left;
        background: #ccc;
        margin-right: 50px;
    }
    li > a {
        text-decoration: none;
        display: block;
        position: relative;
        line-height: 40px;
        padding: 0 8px;
        color: #444;
        text-shadow: 0 1px 0 #fff;
    }
    li > a:before {
        content: '';
        position: absolute;
        border: 20px solid #ccc;
        border-left-color: transparent;
        border-top-color: transparent;
        right: 100%;
        top: 0;
    }
    li > a:after {
        content: '';
        position: absolute;
        border: 20px solid #ccc;
        border-right-color: transparent;
        border-bottom-color: transparent;
        left: 100%;
        top: 0;
    }





    li:first-child > a {
        background: #aaa;
    }
    li:first-child > a:after {
        border-top-color: #aaa;
        border-left-color: #aaa;
    }

    li:last-child > a {
        background: #ddd;
    }
    li:last-child > a:before{
        border-right-color: #ddd;
        border-bottom-color: #ddd;
    }
    li:last-child > a:after {
        border: 0;
    }

This is the basic stuff. You should work a little to use it for your purpose.

See demo

See updated demo

You helped me a lot, adding the opacity:0 to firts and last node I got what i needed. Check it out: http://jsfiddle.net/994uG/2/ — Ivan Pandžić, Mar 21 '14 at 19:24
@IvanPandžić I have also added an updated version..:) See updated demo .. Glad I could help :) — newTag, Mar 21 '14 at 19:27

score 2 · Answer 2 · answered Mar 21 '14 at 19:18

You can use the css transform property: (not with rotate but skew)
w3schools, css-tricks
But it won't work in old browsers.

Code:

div {
  height: 100px;
  width: 300px;
  background: red;
  transform:skew(-45deg);
  -ms-transform:skew(-45deg); /* IE 9 */
  -webkit-transform:skew(-45deg); /* Opera, Chrome, and Safari */
}

score 1 · Answer 3 · answered Mar 21 '14 at 19:26

Take a look at this complete example I just created:

li a {
    display: block;
    padding: 10px 10px 10px 25px;
    background: #4563DC;
    color: #111;
    position: relative;
}
li a.active {
    background: coral;
    color: #EEE;
}
li a:before, li a:after {
    position: absolute;
    top: 0;
    left: 0;
    content:'';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 40px 14px 0 0;
    border-color: #4563DC transparent transparent transparent;
    z-index: 1;
}
li a:after {
    left: auto;
    right: -14px;
    z-index: 2;
}
li a.active:after {
    border-top-color: coral;
}
li:first-of-type a:before {
    border-top-color: #FFF;
}

Demo: http://jsfiddle.net/M8cWZ/

score 1 · Answer 4 · answered Mar 21 '14 at 19:26

The effect can be achieved with a skew transform, though it will require alternate fallback solutions for older browsers.

I've thrown together a quick example of your nav bar here on jsfiddle which utilises a pseudo element on the anchor to apply the skew behaviour to.

transform: skew(-15deg,0);
-ms-transform: skew(-15deg,0);
-webkit-transform: skew(-15deg,0);

Angled border separating li elements

4 Answers4

Demo: http://jsfiddle.net/M8cWZ/