How to skew element but keep text normal (unskewed)

Tags: css,css3,css-shapes

Problem :

It's possible to reproduce this image using only CSS?

enter image description here

I want to apply this on my menu, so the brown background appears on hover instance

I don't know how to do this.

i have only:

.menu li a:hover{
     padding:6px 4px;

Solution :

skew a parent element (LI) and inverse skew it's children elements

CSS Menu skewed buttons diagonal borders

nav li {
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */
nav li a {
  padding:5px 10px;
  transform: skew(-20deg); /* INVERSE SKEW */
nav li:hover{
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>

    CSS Howto..

    how to make css submenu stay put when subpage has been selected

    How does max-width property make images responsive?

    How to keep a diagonal running background animation without rotating the div?

    How to change label color of disabled checkbox in ASP.NET?

    How to design a Sass animation library that allows users to modify variables?

    How to position a drop down list nav bar inside header in html css

    How to make a website look like a Windows Office application? [closed]

    How to implement dynamic layout columns by using the `content_for?` method?

    How can I import a single string line of text to multiple HTML files?

    How to make a div to float left/right inside a centered div

    How to apply pseudo-element styling to specific class only?

    CSS question how to make one div appear over another?

    How does tablesort.js create the sort indicator arrows

    How to fix button position next to input when screen resizes

    How can I split a text in 2 color vertically?

    How to use font-face with cssless?

    How to vertically align both image and text in a DIV using CSS?

    How do I give one stylesheet precedence over the other with Rails?

    CSS table: How to position action buttons left to each row

    How to use Vendor Properties in Multiple Backgrounds?

    How to align a div with the right of a table?

    How to do not apply CSS on a specific TAG

    How to create a CSS3 animation that resembles an image fill up effect?

    How to read inline styling of an element?

    How can I make kinetic.js full screen background view

    How do I add a CSS class to a BoundField, so I can find it with jQuery?

    How to optimize CSS code?

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    How to align text within a div

    How to make horizontal lines with words in the middle using CSS?