LESS mixins to draw left or right arrows in CSS3.

css3arrows.less

.rightArrow(@color, @alpha, @size) {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
	border-left-color: @color;
	border-width: @size*@px;
	top: 50%;
	margin-top: (0-@size)*@px;
}
.bottomArrow(@color, @alpha, @size) {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
        border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
	border-top-color: @color;
	border-width: @size*@px;
	left: 50%;
	margin-left: (0-@size)*@px;
}