用css写三角形，宽高可设置

 

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;