CSS3ナビゲーションハイパーリンクスキュー

Question

新しいCSS3スキュープロポーザルを使用してナビゲーションメニューを作成しています。変換されていないハイパーリンクを残す方法はありますか？それは、その要素の内容ボックスの全体に影響するため、

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変換「を防ぐ」ことはできません。ここに私のコードです。

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

JS Fiddle demo：しかし、あなたはは親要素のskew「逆」にa要素自体にskewを使用して、それによって補うことができます。

注：UbuntuのChromiumで実験したところ、display: blockという要素にのみ影響すると思われます。そのため、上記のaには、その宣言が含まれています。