CSS3導航超鏈接傾斜

Question

我正在用新的CSS3 skew propoerty創建導航菜單。有沒有辦法讓超鏈接不被轉換？這裏是我的代碼：

ul{ 
margin:0; 
padding:0; 
list-style-type:none; 
} 

.menu li{float:left; height: 31px; margin-right:10px; padding:0 5px; -webkit-transform: skew(30deg);} 

Answer 1

你不能「阻止」的skew改造，因爲它影響了整個該元素的內容框。但是你可以通過補償吧，a元素本身對「反向」的父元素的skew上使用skew：

.menu li a { 
    display: block; 
    -webkit-transform: skew(-30deg); /* the negative skew value of the parent element */ 
}​ 

JS Fiddle demo。

注意：skew似乎從Ubuntu的Chromium實驗中，隻影響display: block的元素，這就是爲什麼上面的a css包含該聲明的原因。