Angular boundary separating elements li

Question

I want to create horizontal navigation using li elements. Li elements will be divided by 45 degrees. I found this example:

It looks great, but how to do it?

Answer 1

CSS usage:

   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 main material. You have to work a bit to use it for your purpose.

Watch the demo

See updated demo

Answer 2

You can use the css transform property: (not with rotation, but with skew)
w3schools , css-tricks
But it will not work in older browsers.

the 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 */
}

Answer 3

, :

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;
}

: http://jsfiddle.net/M8cWZ/

Answer 4

The effect can be achieved by skewing, although older browsers will require alternative backup solutions.

I put together a quick example of your navigation bar here in jsfiddle , which uses an anchored pseudo-element to apply oblique behavior to.

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