less封装三角形

//向上三角

.triangle(top,@w:0.3125rem,@c:#ccc){

border-width:@w;

border-color:transparent transparent @c transparent;

border-style: dashed dashed solid dashed;

}

//向下三角

.triangle(bottom,@w:0.3125rem,@c:#ccc){

border-width:@w;

border-color: @c transparent transparent transparent;

border-style: solid dashed dashed dashed;

}

//向左

.triangle(left,@w:0.3125rem,@c:#ccc){

border-width:@w;

border-color:transparent @c transparent transparent;

border-style:dashed solid dashed dashed;

}



//向右

.triangle(right,@w:0.3125rem,@c:#ccc){

border-width:@w;

border-color:transparent transparent transparent @c;

border-style:dashed dashed dashed solid;

}

.triangle(@_,@w:0.3125rem,@c:#ccc){

width:0;

height: 0;

overflow: hidden;

}



用法：.triangle(right,@w:1.6vw,@c:#fff);