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

¿Es posible reproducir esta imagen usando solo CSS?

ingrese la descripción de la imagen aquí

Quiero aplicar esto a mi menú, para que aparezca el fondo marrón en hoverla instancia.

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

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

Jul 30 '13 19:07 Preston

skewun elemento principal ( lien este ejemplo) y sesgar inversamente sus elementos secundarios:

Menú CSS botones sesgados bordes diagonales

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
}
nav li {
  transition: background 0.3s, color 0.3s;
  transform: skew(20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* UNSKEW */
  color: inherit;
}

nav li.active,
nav li:hover {
  background: #000;
  color: #fff;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Expandir fragmento

Jul 30 '2013 13:07 Roko C. Buljan

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

Intente jugar con los argumentos que utilicé :beforey :afterpara hacer esto.

https://jsfiddle.net/DTBAE/

Jul 30 '2013 13:07 udidu

Puede utilizar la transform: skew(X, Y)propiedad para lograr esto. Creando un contenedor exterior sesgado, luego sesga la cantidad opuesta en un contenedor interior para sesgar el texto y volverlo a ser recto. Vea este violín, por ejemplo;

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

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

Jul 30 '2013 13:07 Don

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

.skew p {
  transform: skewX(7deg);
}

<div class="skew">
  <p>This is caption</p>
</div>

Expandir fragmento

Aquí hay un ejemplo

Jun 23 '2017 08:06 lurk