CSS3 навигационные гиперссылки

Question

Я создаю меню навигации с новым CSS3 proewerty. Есть ли способ оставить гиперссылки не преобразованными? Вот мой код:

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 кажется, из экспериментов с Chromium в Ubuntu, только чтобы повлиять на элементы display: block, поэтому a css выше включает это объявление.