How to skew element but keep text normal using CSS

You can use the transform: skew(X,Y) property to achieve this. Creating a skewed outer container, then another inner container to skew the text back to being straight.Below is a demo of the above:

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
nav li {
  transition: background 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:hover {
  background: #000;
  color: #fff;
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
Try it yourself