1.不传@h,@c === @h;
2.元素width = @w, 元素height = @h*2
3.配合上.center()实现图标居中
less版本:
//上下左右居中
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
//三角形
//方向,颜色,宽度,高度
.triangle(right, @c, @w, @h: @w){
border-left: @w solid @c;
border-right: none;
border-top: @h solid transparent;
border-bottom: @h solid transparent;
}
.triangle(left, @c, @w, @h: @w){
border-left: none;
border-right: @w solid @c;
border-top:@h solid transparent;
border-bottom: @h solid transparent;
}
.triangle(bottom, @c, @w, @h: @w){
border-left: @h solid transparent;
border-right: @h solid transparent;
border-top: @w solid @c;
border-bottom: none;
}
.triangle(top, @c, @w, @h: @w){
border-left: @h solid transparent;
border-right: @h solid transparent;
border-top: none;
border-bottom: @w solid @c;
}
css版本:
border-left: none;
border-right: 6px solid #627387;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
content: '';
display: block;