Preston Preston - 1 month ago 6
CSS Question

How to skew element but keep text normal (unskewed)

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{
display:block;
background:#1a0000;
padding:6px 4px;
}

Answer

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

CSS Menu skewed buttons diagonal borders

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-size:30px;
  transform: skew(-20deg); /* INVERSE SKEW */
}
nav li:hover{
  background:#ddd;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>