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>

效果如下