是否可以仅使用 CSS 重现此图像?
我想将它应用到我的菜单中,所以棕色背景出现在 hover
实例上
我不知道怎么做,我只有;
.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
最佳答案
倾斜
父元素(本例中为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>
关于css - 如何倾斜元素但保持文本正常(不倾斜),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41715177/