还有其他方法可以进行倾斜导航吗？ [关闭]

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