有角度的边界分离李元素 [英] Angled border separating li elements

问题描述

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

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?

推荐答案

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

这是基本的东西。

请参阅演示

查看更新的演示

这篇关于有角度的边界分离李元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！