How to skew element but keep text normal (unskewed)

Question

Is it possible to reproduce this image using only CSS?

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

I don't know how to do this, I only have;

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

Answer 1

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

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>

Answer 2

Here is a fiddle for use across different browsers - I created in a couple of minutes.

Try playing with the arguments, I used :before and :after to do this.

https://jsfiddle.net/DTBAE/