CSS parallelogram background

Question

I am trying to create this navigation menu (green highlight - active page, gray - hover state):

I can do a parallelogram with the following CSS:

ul#nav li a { text-decoration:none; padding:4px 10px; border-radius:3px; transform: skew(-10deg); -o-transform: skew(-10deg); -moz-transform: skew(-10deg); -webkit-transform: skew(-10deg); color:#757575; } ul#nav li a:hover { background:#f3f1eb; } ul#nav li a.current-menu-item { color:#fff; background:#5d9732; } ul#nav li a.current-menu-item:hover { background:#5d9732; } 

Unfortunately, this leads to the fact that the text is also distorted, and italics appear:

Here jsfiddle shows the setup (although skew does not work in jsfiddle): http://jsfiddle.net/K3bQJ/4/

Is there a way to prevent text skew so it doesn't appear in italics? I download jQuery, but would prefer to avoid this, or at least have a useful CSS backup.

Thanks for any advice!

Answer 1

Try this. Add a gap inside your tags and set it in the opposite direction (note the use of skewX, which is considered correct according to https://developer.mozilla.org/en/CSS/-moz-transform )

 <ul id="nav"> <li><a class="current-menu-item" href="#"><span>Nav Item 1</span></a></li> <li><a href="#"><span>Nav Item 2</span></a></li> <li><a href="#"><span>Nav Item 3</span></a></li> </ul> ul#nav li a { display: inline-block; text-decoration:none; padding:4px 10px; border-radius:3px; transform: skewX(-10deg); -o-transform: skewX(-10deg); -moz-transform: skewX(-10deg); -webkit-transform: skewX(-10deg); color:#757575; } ul#nav li a span { display: inline-block; transform: skewX(10deg); -o-transform: skewX(10deg); -moz-transform: skewX(10deg); -webkit-transform: skewX(10deg); }