分隔li元素的有角度的边界

Question

我想使用li元素创建水平导航。 Li元素将被边界成45度角分开。我找到了这个例子：

这看起来很棒，但如何获得这个？

Answer 1

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

这是基本的东西。你应该稍微努力将它用于你的目的。

See demo

See updated demo

Answer 2

您可以使用css转换属性:(不是旋转但倾斜）
w3schools，css-tricks
但它不适用于旧浏览器。

代码：

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

使用偏斜变换可以实现效果，但它需要旧版浏览器的备用后备解决方案。

我把一个导航栏here on jsfiddle的快速示例放在一起，它使用锚点上的伪元素来应用倾斜行为。

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