有可能只使用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>
