CSS3导航超链接偏斜

Question

我正在使用新的CSS3 skew属性创建导航菜单。有没有办法让超链接不被转换？这是我的代码：

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转换，因为它会影响该元素的整个内容框。但是可以通过使用skew元素本身的a来“反转”父元素的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包含该声明的原因。