平行四边形、梯形导航条

平行四边形

效果如图：

hover 的效果如图：

代码如下：

<div class="keith">        <ul>            <li>导航条</li>            <li>首页</li>            <li>呼呼呼</li>            <li>嘻嘻嘻</li>            <li>设置</li>            <li>个人中心</li>        </ul></div>

.keith li {  position: relative;  float:left;  margin-left:2px;  color:#fff;  text-decoration: none;  list-style:none;  padding:5px 10px;}.keith li::after {  content: '';  position: absolute;  left: 0;  right: 0;  bottom: 0;  top: 0;  z-index: -1;  background: #069e06;  -moz-transform: skewX(-25deg);  -ms-transform: skewX(-25deg);  -webkit-transform: skewX(-25deg);  transform: skewX(-25deg);}.keith li:hover::after {  background: #0ee80e;}

梯形

用于控制梯形是左倾斜还是右倾斜的属性是transform-origin。梯形不倾斜：bottom。左倾斜：bottom left；右倾斜：bottom right。

效果如图：

hover:效果：

代码如下：

<div class="keith">  <ul>     <li >导航条</li>     <li >首页</li>    <li>呼呼呼</li>    <li >嘻嘻嘻</li>     <li >设置</li>    <li >个人中心</li>        </ul></div>

.keith li {  position: relative;  float:left;  margin-left:-10px;  color:#fff;  text-decoration: none;  list-style:none;  padding:10px 15px 5px 15px;  }.keith li::after {  content: '';  border:2px solid #fff;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  z-index: -1;  background: #069e06;  -moz-transform: perspective(0.5em) rotateX(5deg);  -ms-transform: perspective(0.5em) rotateX(5deg);  -webkit-transform: perspective(0.5em) rotateX(5deg);  transform: perspective(0.5em) rotateX(5deg);  -moz-transform-origin: bottom;  -webkit-transform-origin: bottom;  transform-origin: bottom ;}.keith li:hover::after {  background: #0ee80e;}