Cómo sesgar el elemento pero mantener el texto normal (sin alinear)

¿Es posible reproducir esta imagen usando solo CSS?

enter image description here

Quiero aplicar esto a mi menú, por lo que aparece el fondo marrón en la instancia de hover

No sé cómo hacer esto, solo tengo;

 .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; } 

skew un elemento padre ( LI ) e invertir sesgo es elementos hijos

Menú CSS botones sesgados bordes diagonales

 nav li { display:inline-block; transition: background 0.2s; transform: skew(20deg); /* SKEW */ } nav li a { display:block; text-decoration:none; padding: 5px 10px; font: 30px/1 sans-serif; transform: skew(-20deg); /* INVERSE SKEW */ color: #0bf; } nav li.active, nav li:hover{ background:#000; } 
  

Aquí hay un violín para usar en diferentes navegadores, lo creé en un par de minutos.

Intenta jugar con los argumentos, utilicé :before y :after para hacer esto.

https://jsfiddle.net/DTBAE/

Puede usar la propiedad transform: skew(X, Y) para lograr esto. Crear un contenedor externo sesgado, luego sesgar la cantidad opuesta en un contenedor interno para sesgar el texto de nuevo a ser recto. Ver este violín por ejemplo;

http://jsfiddle.net/UZ6HL/4/

Por lo que ha dicho, creo que esto es lo que quiere, de lo contrario aclare cuándo debe mostrar el fondo.

Para tener soporte de IE simplemente agregue -ms-transform: skew(20deg, 0deg); al lado de la otra transform: skew(20deg, 0deg); s.

 .skew { background: green; color: #fff; padding: 50px; transform: skewX(-7deg); font-size: 20px; font-weight: 700; } .skew p { transform: skewX(7deg); } 
 

This is caption