我想用 CSS3 创建一个很酷的面包屑菜单,我在网上看到很多关于它的教程 - 这个例子几乎不符合我的需要http://css-tricks.com/examples/TriangleBreadcrumbs/
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown;
background-image: linear-gradient(to bottom, brown, black);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
但我想在菜单按钮上有一个垂直的线性渐变,当鼠标悬停时,这个渐变也应该反转。
我知道我可以用精灵做到这一点,但只能用 CSS3 吗?