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

我正在尝试创建此导航菜单（绿色突出显示是活动页面，灰色是悬停状态）：

我可以使用以下 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/ http://jsfiddle.net/K3bQJ/4/

有什么办法可以防止文本倾斜，使其不显示为斜体吗？我正在加载 jQuery，但更愿意避免它，或者至少有一个可用的 CSS 后备。

感谢您的任何建议！

Try this http://jsfiddle.net/K3bQJ/6/在标签内添加一个跨度并将其倾斜设置为相反方向（注意使用 skewX ，根据https://developer.mozilla.org/en/CSS/-moz-transform 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);
}