paralelogramo fondo de navegación con CSS

Question

Estoy intentando crear este menú de navegación (selección verde es la página activa, gris es flotar estado):

que puede hacer que el paralelogramo con el siguiente 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; 
} 

Desafortunadamente, esto hace que el texto para sesgar así, que aparecen en cursiva:

Aquí hay una jsFiddle que muestra la configuración (aunque la inclinación no funciona en jsFiddle): http://jsfiddle.net/K3bQJ/4/

¿Hay alguna manera de prevenir la inclinación del texto, por lo que no aparece en cursiva? Estoy cargando jQuery, pero preferiría evitarlo o al menos tener un respaldo de CSS utilizable.

¡Gracias por cualquier consejo!

Answer 1

Try this Añadir un lapso dentro de sus etiquetas y establecer su posición oblicua a la dirección opuesta (tenga en cuenta el uso de skewX que se considera correcto según 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); 
}