Creación de triangulos por less. Esto ayuda a crear triángulos, al lado de una etiqueta.

tria

#arrow {
	.left ( @color : blue, @size: 20px, @position : center, @alt : 150px ){
		content: "";
		position: absolute;
		right: 100%;
		border-top: @size solid transparent;
		border-bottom: @size solid transparent; 
		border-right: @size solid @color;
		z-index : 200;
		top: @position;
	}
	.left ( @color, @size, @position, @alt ) when ( @position = top ) 
		{ top: 0; }
	.left ( @color, @size, @position, @alt ) when ( @position = bottom ) 
		{ bottom: 0; }
	.left ( @color, @size, @position, @alt ) when ( @position = center ), ( isNumber( alt ) ) 
		{	@H2 : (@size / 2) + ( ~`Math.sqrt( Math.pow( parseFloat( "@{size}" ), 2 ) * 2 )` );
			top : unit( floor( ( @alt - @H2 ) / 2) , px ) ; }

	.right( @color : blue, @size: 20px, @position : center, @alt : 150px ){
		content: "";
		position: absolute;
		left: 100%;
		border-top: @size solid transparent;
		border-bottom: @size solid transparent;
		border-left: @size solid @color;
		z-index : 200;
		top: @position;
	}
	.right ( @color, @size, @position, @alt ) when ( @position = top ) 
		{ top: 0; }
	.right ( @color, @size, @position, @alt ) when ( @position = bottom )
		{ bottom: 0; }
	.right ( @color, @size, @position, @alt ) when ( @position = center ), ( isNumber( alt ) ) 
		{	@H2 : (@size / 2) + ( ~`Math.sqrt( Math.pow( parseFloat( "@{size}" ), 2 ) * 2 )` );
			top : unit( floor( ( @alt - @H2 ) / 2) , px ) ; }

	.top ( @color : blue, @size: 20px, @position: center, @alt : 150px ) {
		content: "";
		position: absolute;
		bottom: 100% ;
		border-bottom: @size solid @color;
		border-left: @size solid transparent;
		border-right: @size solid transparent; 
		z-index : 200;
		left: @position;
	}
	.top ( @color, @size, @position, @alt ) when ( @position = left )
		{ left: 0; }
	.top ( @color, @size, @position, @alt ) when ( @position = right )
		{ right: 0; }
	.top ( @color, @size, @position, @alt ) when ( @position = center ), ( isNumber( alt ) ) 
		{	@H2 : (@size / 2) + ( ~`Math.sqrt( Math.pow( parseFloat( "@{size}" ), 2 ) * 2 )` );
			right : unit( floor( ( @alt - @H2 ) / 2) , px ) ; }

	.bottom ( @color : blue, @size: 20px, @position: center, @alt : 150px ){
		content: "";
		position: absolute;
		left: @size;
		border-top: @size solid @color;
		border-left: @size solid transparent;
		border-right: @size solid transparent; 
		z-index : 200;
	}
	.bottom ( @color, @size, @position, @alt ) when ( @position = top )  
		{ left: 0 ; }
	.bottom ( @color, @size, @position, @alt ) when ( @position = bottom ) 
		{ right: 0; }
	.bottom ( @color, @size, @position, @alt ) when ( @position = center ), ( isNumber( alt ) ) 
		{	@H2 : (@size / 2) + ( ~`Math.sqrt( Math.pow( parseFloat( "@{size}" ), 2 ) * 2 )` );
			left : unit( floor( ( @alt - @H2 ) / 2) , px ) ; }
}

// Use

#left {
	width : 150px;
	hiegth : 50px;
	background-color : red;
	&:after { #arrow > .top( blue, 20px, center, 50px ); }
}

I can't fork it, there is a typo in line 78, it should be:

height: 50px;

Si te interesa... lo puedo pasar a SCSS