使用CSS创建平行四边形导航背景

Question

我正在尝试创建此导航菜单（绿色高亮为活动页面，灰色为悬停状态）：

我可以使用以下CSS制作平行四边形：

ul#nav li a {
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
    transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -webkit-transform: skew(-10deg);
    color:#757575;
}

ul#nav li a:hover {
    background:#f3f1eb;
}

ul#nav li a.current-menu-item {
    color:#fff;
    background:#5d9732;
}

ul#nav li a.current-menu-item:hover {
    background:#5d9732;
}

不幸的是，这也会使文本倾斜，呈现为斜体：

这里有一个 jsfiddle 展示了设置（尽管在 jsfiddle 中倾斜不起作用）: http://jsfiddle.net/K3bQJ/4/ 有没有办法防止文本倾斜，使其不呈现为斜体？我正在加载 jQuery，但希望避免使用它或至少有可用的 CSS 回退。

感谢任何建议！

- R.J.

---

供日后参考，有一个网站叫做http://cssdesk.com/，专门用于CSS和HTML的测试，没有Javascript组件。我认为这对于这种类型的测试非常好用。 - TheZ

我现在无法测试，但是将视觉效果放置在li元素上，例如background-color和transform，然后在锚元素上设置transform:none，这个方案如何？ - Henrik Janbell

在 jsFiddle 中应用 display: inline-block;。http://jsfiddle.net/K3bQJ/5/ - user1479055

有趣的问题。你知道，有时候只使用一张图片真的很酷 :) - Jezen Thomas

+1 旁注：如需使用箭头的替代CSS3导航方法，请参阅我的SO答案。干杯！ - arttronics

Answer 1

点击这里在你的标签内添加span元素并将其倾斜到相反的方向（注意使用skewX，根据https://developer.mozilla.org/en/CSS/-moz-transform被认为是正确的）

<ul id="nav">
    <li><a class="current-menu-item" href="#"><span>Nav Item 1</span></a></li>
<li><a href="#"><span>Nav Item 2</span></a></li>
<li><a href="#"><span>Nav Item 3</span></a></li>
</ul>

ul#nav li a {
    display: inline-block;
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
            transform: skewX(-10deg);
         -o-transform: skewX(-10deg);
       -moz-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    color:#757575;
}

ul#nav li a span {
    display: inline-block;
            transform: skewX(10deg);
         -o-transform: skewX(10deg);
       -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
}

- Jason Sperske

---

有过同样的想法，除了尝试在 a 上而不是用 span 包装它。 - ayyp

完美，这个有效！我只是将背景样式添加到li元素而不是a元素，以避免添加更多的标记，然后将反向倾斜设置为锚元素。非常感谢！ - R.J.

根据https://developer.mozilla.org/en/CSS/-moz-transform，您不应该使用skew()，而是提供您尝试倾斜的预期轴（在这种情况下为skewX()）。我已更新cssdesk.com链接。 - Jason Sperske

+1 很好的回答。顺便提一下：你上次评论中提到的 Jason 对于 Firefox v14 放弃了 transform skew() 是很重要的。我认为你在 cssdesk.com 上的演示也应该成为你回答的一部分。祝好！ - arttronics