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 변화를 '예방'할 수 없습니다 여기 내 코드입니다. 하지만 당신은 부모 요소의 skew '역'에 a 요소 자체에 skew를 사용하여 보정 할 수 있습니다 :

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

JS Fiddle demo합니다.

참고 : 은 우분투의 Chromium 실험에서 display: block의 요소에만 영향을주는 것으로 보입니다. 따라서 위의 a CSS에는 해당 선언이 포함되어 있습니다.