CSS Triangle Less Mixin

CSS Triangle Less Mixin

.css-triangle(@triangle-size, @triangle-color, @triangle-direction) {
	border: inset @triangle-size;
	content: "";
	display: block;
	height: 0;
	position: absolute;
	width: 0;

	& when (@triangle-direction = top) {
		border-color: transparent transparent @triangle-color transparent;
		border-bottom-style: solid;
		top: -@triangle-size*2;
		left: 50%;
		margin-left: -@triangle-size;
	}

	& when (@triangle-direction = bottom) {
		border-color: @triangle-color transparent transparent transparent;
		border-top-style: solid;
		bottom: -@triangle-size*2;
		left: 50%;
		margin-left: -@triangle-size;
	}

	& when (@triangle-direction = left) {
		border-color: transparent @triangle-color transparent transparent;
		border-right-style: solid;
		left: -@triangle-size*2;
		top: 50%;
		margin-top: -@triangle-size;
	}

	& when (@triangle-direction = right) {
		border-color: transparent transparent transparent @triangle-color;
		border-left-style: solid;
		right: -@triangle-size*2;
		top: 50%;
		margin-top: -@triangle-size;
	}

}// .css-triangle

Thanks to https://github.com/hulufei/pure-bootstrap/blob/master/styl/lib/mixins/triangle.styl & http://stackoverflow.com/questions/14910667/how-to-use-if-statements-in-less