有可能只使用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>
原文地址:https://www.jb51.cc/css/221072.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。