Sto cercando di creare questo menu nav (highlight è la pagina attiva, il grigio è hover stato):parallelogramma sfondo di navigazione con CSS
posso fare il parallelogramma con il seguente 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;
}
Purtroppo, questo fa sì che il testo per inclinare pure, appaiono in corsivo:
Ecco un jsfiddle mostra la configurazione (anche se l'inclinazione non funziona in jsfiddle): http://jsfiddle.net/K3bQJ/4/
Esiste un modo per impedire l'inclinazione del testo, in modo che non appare in corsivo? Sto caricando jQuery ma preferirei evitarlo o almeno avere un fallback CSS utilizzabile.
Grazie per qualsiasi consiglio!
Per riferimento futuro, non c'è http: // cssdesk. com/che è solo per CSS e HTML senza il componente Javascript. Penso che sia abbastanza carino per questo tipo di test. – TheZ
Applica la visualizzazione di ': blocco in linea;' in jsFiddle. http://jsfiddle.net/K3bQJ/5/ –
Problema interessante. Sai, a volte è davvero bello usare e solo immagini :) –