CSS+HTML实现倾斜导航条

页面中经常遇到导航条，大部分带形状的需要伪类加图片，先介绍一种纯CSS+HTML实现的方法。

HTML

<div class="tab">
    <ul>
        <li>腾讯</li>
        <li>百度</li>
        <li>阿里巴巴</li>
        <li>LOL</li>
    </ul>
</div>

CSS

首先li标签浮动显示在一排。

::after设置伪类元素，实现倾斜的背景，标签内的文字不变。

CSS 2D 变形中的skew()倾斜属性，我们只需要水平方向的倾斜，用skew()时要设置第二个参数为0，所以使用skewX()。

<style>
    .tab li{
        list-style: none;
        float:left;padding:10px;
        margin-left:5px;
        position:relative;
        color:white;
    }
    .tab::after{
        content:"";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .tab ul::after{
        content:"";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .tab li::after{
        border-radius: 3px;
        content:'';
        position:absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: -1;
        background-color: #09818D;
        -moz-transform: skewX(-25deg);
        -ms-transform: skewX(-25deg);
        -webkit-transform: skewX(-25deg);
        transform:skewX(-25deg);
    }
    .tab li:hover::after{
        background-color:#58CAD0 ;
    }
</style>

效果如下