sassy-triangles.scss

//
// These are used to generate equilateral or isoceles triangles.
//
// @param {int-px} distance from top of div
// @param {int-px} height of triangle
// @param {int-px} width of triangle
// @param {colour-hex} color of triangle
//

//
// Generate triangle stuck to left of <div>, pointing to the right
//

@mixin right-triangle($distanceFromTop, $height, $width, $color) {
	position: absolute;
	top: $distanceFromTop;
	left: 0;
	width: 0;
	height: 0;
	border-top: ($height)/2 solid transparent;
	border-left: $width solid $color;
	border-bottom: ($height)/2 solid transparent;
}

//
// Generate triangle stuck to right of <div>, pointing to the left
//

@mixin left-triangle($distanceFromTop, $height, $width, $color) {
	position: absolute;
	top: $distanceFromTop;
	right: 0;
	width: 0;
	height: 0;
	border-top: ($height)/2 solid transparent;
	border-right: $width solid $color;
	border-bottom: ($height)/2 solid transparent;
}

//
// I'm going to do a bunch of more of these but I'll put it into a proper project, just leaving this up a Gist so I don't forget!
//