LESS sharp left/right arrow generator

arrow-generator.less

.arrow-generator(@direction:right, @width:50, @height:20, @weight:2, @color:#000) {
	.arrow-@{direction} {
		position: relative;
		width: unit(@width, px);
		height: unit(@height, px);
		display: inline-block;
		&:after {
			content: '';
			border-right: unit(@weight, px) solid @color;
			border-top: unit(@weight, px) solid @color;
			position: absolute;
			width: unit(@height, px);
			height: unit(@height, px);
			.rotation(0);
		}
		&:after when (@direction = right) {
			.rotation(45deg);
			right: unit(@weight, px);
		}
		&:after when (@direction = left) {
			.rotation(-135deg);
			left: unit(@weight, px);
		}
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			right: 0;
			height: unit(@weight, px);
			.translate(0, -50%);
			background: @color;		
		}
	}
}

// usage
.arrow-generator(right, 30, 10, 2, #000);