Using opposite-position

This mixin creates a triangle using the border properties in css. By using the opposite-position function in Compass we can create a triangle with only 1 argument and let the mixin calculate the opposite side.

=caret($point)
	$opposite: opposite-position($point)
	border: 100px solid transparent
	border-#{$opposite}: 100px solid #000
	border-#{$point}: 0
	height: 0
	width: 0
.caret 
	+caret(top)

Add your comment