平行四邊形導航背景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後備。

感謝您的任何建議！

Answer 1

Try this添加一個跨度的標籤內，並設置它的傾斜到相反方向（注意使用如果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); 
}