平行四边形、梯形导航条-蒲公英云

平行四边形、梯形导航条

平行四边形

效果如图：

Center

hover 的效果如图：

Center 1

代码如下：

<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。

效果如图：

Center 2

hover:效果：

Center 3

代码如下：

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