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包含该声明的原因。