是否还有其他方法可以做偏斜导航？

Question

波纹管是我的导航，它偏斜型。因此，当菜单激活时，它会显示红色，并且顶部蓝色区域也会被红色覆盖下方显示一个活动按钮，它将如何显示

我可以通过精灵图像来做到这一点。另一种方式是css skew -webkit-transform: skew(16deg, 0);还有另一种方式是画布，但我认为画布有点复杂。

还有其他最好的偏斜型导航吗？

Answer 1

尝试使用它：

HTML

  <nav role='navigation'>
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li class="current"><a href="#"><span>About</span></a></li>
      <li><a href="#"><span>Clients</span></a></li>
      <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
  </nav>

<强> CSS

ul {
  width: 50%;
}

li {
  display: inline-block;
  margin-right: -4px;
  width: 25%;
}
li a {
  position: relative;
  border: 1px solid #919196;
  background-color: #00465a;
  box-sizing: border-box;
  padding: 1em;
  display: block;
  -moz-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  width: 100%;
  min-height: 3em;
  text-align: center;
}
li a span {
  color: white;
  position: absolute;
  box-sizing: border-box;
  -moz-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  left: 0;
  width: 100%;
}

.current a {
  background: #70cb00;
}

DEMO