Javascript 有没有其他方法可以进行倾斜导航？

下面是我的导航，它是倾斜型的。所以，当菜单将激活时，它将是红色的，顶部栏蓝色区域也被红色覆盖，下面显示一个激活按钮的外观

我可以通过精灵图像来做到这一点。另一种方法是css-skew

-webkit变换：skew（16度，0）还有另一种方式是画布，但我认为画布有点复杂

是否有其他最佳的倾斜类型导航

尝试使用以下方法：

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>

这里有一个例子，但我想看看这个答案，也许你可以使用它。这是原始帖子中的选项之一…？IE支持代码也在这里，但在IE8中，span text内部并不能正常工作
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;
}