Comment incliner un élément mais garder le texte normal (non noté)

Est-il possible de reproduire cette image en utilisant uniquement CSS?

entrer la description de l'image ici

Je veux l’appliquer à mon menu, de sorte que le fond brun apparaisse sur l’instance de hover

Je ne sais pas comment faire ça, j’ai seulement;

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

skew un élément parent ( LI ) et inverser les éléments enfants

Boutons diagonaux du menu CSS

 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; } 
  

Voici un violon à utiliser sur différents navigateurs – j’ai créé en quelques minutes.

Essayez de jouer avec les arguments, j’ai utilisé :before et :after pour faire cela.

https://jsfiddle.net/DTBAE/

Vous pouvez utiliser la propriété transform: skew(X, Y) pour y parvenir. Créer un conteneur externe incliné, puis incliner la quantité opposée sur un conteneur interne pour ramener le texte à être droit. Voir ce violon par exemple;

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

D’après ce que vous avez dit, je pense que c’est ce que vous voulez, sinon, veuillez préciser quand l’élément devrait afficher l’arrière-plan.

Pour avoir le support IE, ajoutez simplement -ms-transform: skew(20deg, 0deg); à côté de tous les autres 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