css - 如何倾斜元素但保持文本正常(不倾斜)

Question

是否可以仅使用 CSS 重现此图像？

我想将它应用到我的菜单中，所以棕色背景出现在 hover 实例上

我不知道怎么做，我只有；

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

Answer 1

倾斜父元素(本例中为li)并反向倾斜其子元素:

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>