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:

This looks great, but how to get this?

Answer 1

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