css3制作梯形导航

/*HTML*/
<div class="nav">
  <a href="javascript:;">首页</a>
  <a href="javascript:;" class="active">项目</a>
  <a href="javascript:;">关于</a>
</div>

/*CSS*/
.nav a {
  position: relative;
  padding: .5em 1em .35em;
  display: inline-block;
  color: #fff;
  width: 60px;
  margin-left: -20px;
  text-align: center;
}
.nav a:first-child {
  margin-left:;
}
.nav a::before {
    content: "";
    position: absolute;
    top:;
    right:;
    bottom:;
    left:;
    z-index: -1;
    background-color: #58a;
    border: 1px solid rgba(0,0,0,.4);
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    box-shadow: 0 .15em white inset;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom left; /* 控制倾斜的方向 */
   /*  transform-origin: bottom right; */
}
.nav .active {
  z-index:;
}
.nav a.active::before {
  background: #55a;
}

效果图