html - 分隔 li 元素的斜 Angular 边框

Question

我想使用 li 元素创建水平导航。锂元素将被 45 度 Angular 的边界分开。我找到了这个例子:

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

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