导航新风尚：CSS梯形设计，让网站菜单不再单调！

<div class="trapezoid" id="trapezoid">
    <ul>
      <li class="zIndex">Home</li>
      <li>Blog</li>
      <li>Source</li>
      <li>Bookmark</li>
      <li>About</li>
    </ul>
  </div>

ul {
      list-style: none;
    }
    .trapezoid li {
      position: relative;
      display: inline-block;
      width: 100px;
      height: 50px;
      line-height: 65px;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
    .zIndex {
      z-index: 1;
    }
    .trapezoid li::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -15px;
      right: -15px;
      z-index: -1;
      border-radius: 10px 10px 0 0;
      border: 1px solid #fff;
      background: #2175BC;
      -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;
    }
    .trapezoid li:hover::after {
      background: #3B9BE5;
    }