是否可以仅使用CSS复制此图像？
我想把这个应用到我的菜单上，这样棕色的背景就会出现在hover个实例上
我不知道怎么做，我只知道；
.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
推荐答案
skew是父元素(LI)，inverse skew是其子元素
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>