css – 如何偏斜元素,但保持文本正常(unskewed)

有可能只使用CSS再现此图像？

我想将此应用于我的菜单，因此棕色背景出现在悬停实例上

我不知道如何做到这一点。

我只有：

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

解决方法

倾斜父元素(LI)和反向倾斜它的子元素

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>