CSS skew issue - child elements skewing despite opposite skew added
I’m trying to get a skewed nav, but the links are skewing with the nav. I understand the code should work if it’s like this:
But that’s not working. Here’s a fiddle: http://jsfiddle.net/U5mq5/
Again, I want my nav li a to be straight, not slanted. Help?
A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.
Therefore the display of the elements should be changed from
inline-block in order for
skew() to work. In addition, I added
white-space: nowrap in order to prevent the text from wrapping to a new line.