SASS: Bordered Box Arrow

*.scss

@import "compass/css3";

// Add outward pointing arrows (triangles) to the sides of a box that has borders. (CSS triangles obviously 
// based on Chris Coyier's CSS triangle. http://css-tricks.com/snippets/css/css-triangle.)
//
//  Parameters:
//  
//  * `direction` -- What side of the box and direction of the arrow  
//  * `flatten` -- An *even numbered* factor of flattening the triangle (MUST be a even number)  
//  * `arrowBaseLength` -- Width or height of the arrow's base 
//  * `borderWidth` -- Width of the arrow's border
//  * `backgroundColor` -- Color of the arrow's background
//  * `borderColor` -- Color of the arrow's border
@mixin bordered-box-arrow($direction:left, $flatten:2, $arrowBaseLength:16px, $borderWidth:1px, $backgroundColor:red, $borderColor:white) {

	// Directional constants
	$directionOpposite: opposite-position($direction);
	$directionPerpendicular: null;
	@if $direction == top or $direction == bottom { $directionPerpendicular: left; }
	@if $direction == left or $direction == right { $directionPerpendicular: top; }
	$directionPerpendicularOpposite: opposite-position($directionPerpendicular);

	// Le math
	$baseBorder: $arrowBaseLength * (1 / $flatten);
	$drop: $baseBorder * -1;
	$adjust: ($arrowBaseLength + $borderWidth * 2) * -1;

	// Force relatively positioned container
	position: relative !important;

	&:before, &:after {
		content: '';
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		#{$directionPerpendicular}: 50%;
		margin-#{$directionPerpendicular}: $adjust;
		border: {
			#{$directionPerpendicular}: $arrowBaseLength solid transparent;
			#{$directionPerpendicularOpposite}: $arrowBaseLength solid transparent;
		}
		border-#{$directionOpposite}: {
			width: $baseBorder;
			style: solid;
		}
	}

	&:before {
		#{$direction}: $drop;
		border-#{$directionOpposite}-color: $borderColor;
	}

	&:after {
		#{$direction}: $drop + $borderWidth;
		border-#{$directionOpposite}-color: $backgroundColor;
	}
}

//Example
.mybox {
	width: 200px;
	height: 100px;
	background: #f4f4f4;
	border: 1px solid #cccccc;

	@include bordered-box-arrow(bottom, 2, 16px, 1px, #f4f4f4, #cccccc);
}

.scss

@import "compass/css3";

// Add outward pointing arrows (triangles) to the sides of a box that has borders. (CSS triangles obviously 
// based on Chris Coyier's CSS triangle. http://css-tricks.com/snippets/css/css-triangle.)
//
//  Parameters:
//  
//  * `direction` -- What side of the box and direction of the arrow  
//  * `flatten` -- An *even numbered* factor of flattening the triangle (MUST be a even number)  
//  * `arrowBaseLength` -- Width or height of the arrow's base 
//  * `borderWidth` -- Width of the arrow's border
//  * `backgroundColor` -- Color of the arrow's background
//  * `borderColor` -- Color of the arrow's border
@mixin bordered-box-arrow($direction:left, $flatten:2, $arrowBaseLength:16px, $borderWidth:1px, $backgroundColor:red, $borderColor:white) {

	// Directional constants
	$directionOpposite: opposite-position($direction);
	$directionPerpendicular: null;
	@if $direction == top or $direction == bottom { $directionPerpendicular: left; }
	@if $direction == left or $direction == right { $directionPerpendicular: top; }
	$directionPerpendicularOpposite: opposite-position($directionPerpendicular);

	// Le math
	$baseBorder: $arrowBaseLength * (1 / $flatten);
	$drop: $baseBorder * -1;
	$adjust: ($arrowBaseLength + $borderWidth * 2) * -1;

	// Force relatively positioned container
	position: relative !important;

	&:before, &:after {
		content: '';
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		#{$directionPerpendicular}: 50%;
		margin-#{$directionPerpendicular}: $adjust;
		border: {
			#{$directionPerpendicular}: $arrowBaseLength solid transparent;
			#{$directionPerpendicularOpposite}: $arrowBaseLength solid transparent;
		}
		border-#{$directionOpposite}: {
			width: $baseBorder;
			style: solid;
		}
	}

	&:before {
		#{$direction}: $drop;
		border-#{$directionOpposite}-color: $borderColor;
	}

	&:after {
		#{$direction}: $drop + $borderWidth;
		border-#{$directionOpposite}-color: $backgroundColor;
	}
}

//Example
.mybox {
	width: 200px;
	height: 100px;
	background: #f4f4f4;
	border: 1px solid #cccccc;

	@include bordered-box-arrow(bottom, 2, 16px, 1px, #f4f4f4, #cccccc);
}