分隔 li 元素的斜角边框答案

【问题标题】：Angled border separating li elements分隔 li 元素的斜角边框
【发布时间】：2014-03-22 03:26:24
【问题描述】：

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

这看起来不错，但是如何获得呢？

【问题讨论】：

这是您正在寻找的内容：stackoverflow.com/questions/10568334/…
之前发现过这个，但我无法将角度应用到第一个 li 节点的左侧，以及最后一个 li 节点的右侧...

标签： html css

【解决方案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

【讨论】：

关闭，但第一个和最后一个 li 与其他的不同
你帮了我很多，将 opacity:0 添加到第一个节点，最后一个节点我得到了我需要的东西。看看：jsfiddle.net/994uG/2
@IvanPandžić 我还添加了一个更新版本..:) 查看更新的演示 .. 很高兴我能提供帮助 :)

【解决方案2】：

您可以使用 css 转换属性：（不是 rotate 而是 skew）
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 */
}

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

这种效果可以通过倾斜变换来实现，尽管它需要针对旧版浏览器的备用回退解决方案。

我整理了一个导航栏here on jsfiddle 的快速示例，它利用锚点上的伪元素来应用倾斜行为。

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

【讨论】：