10
09/2014
css hover lean
原理
其实就是 :before(after)+border
@color-default:#ddd;
@color-hover:#258fb8;
@nav-height:40px;/*导航高度*/
@lean:20px;/*调整倾斜角度*/
.css-hover-lean {
padding: 0;margin: 0;list-style: none;
padding-top: 26px;
li {
float: left;
a {
display: inline-block;
height:@nav-height;line-height:@nav-height;
color:#666;
span {
display: inline-block;
background: @color-default;
padding: 0 6px;
}
&:before {
content:'';
display: inline-block;
vertical-align: top;
height: 0;width: 0;line-height: 0;
border-top:solid 0px red;
border-right:solid 0px blue;
border-bottom:solid @nav-height @color-default;
border-left:solid @lean transparent;
}
&:after {
content:'';
display: inline-block;
vertical-align: top;
height: 0;width: 0;line-height: 0;
border-top:solid @nav-height @color-default;
border-right:solid @lean transparent;
border-bottom:solid 0px blue;
border-left:solid 0px transparent;
}
&:hover {
color:#fff;
span {
background:@color-hover;
}
&:before {
border-bottom-color:@color-hover;
}
&:after {
border-top-color:@color-hover;
}
}
}
}
}