Sass shape mixin

shapes.scss

// Sass Shape Mixin
// http://css-tricks.com/examples/ShapesOfCSS/

@mixin shape($shape, $size, $color){
	
	@if $shape == square {
		width: $size;
		height: $size;
		background-color: $color;
	}
	
	@if $shape == circle {
		width: $size;
		height: $size;
		background-color: $color;
		border-radius: 50%;
	}
	
	@if $shape == triangle {
		width: 0;
		height: 0;
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size*1.5 solid $color;
	}
	
	@if $shape == right-triangle {
		width: 0;
		height: 0;
		border-bottom: $size solid $color;
		border-right: $size solid transparent;
	}
	
	@if $shape == diamond {
		width: 0;
		height: 0;
		border: $size solid transparent;
		border-bottom-color: $color;
		position: relative;
		top: -$size;
	
		&:after {
			content: '';
			position: absolute;
			left: -$size;
			top: $size;
			width: 0;
			height: 0;
			border: $size solid transparent;
			border-top-color: $color;
		}
	}
	
	@if $shape == pentagon {
		position: relative;
		width: $size;
		border-width: (25/27)*$size (1/3)*$size 0;
		border-style: solid;
		border-color: $color transparent;
		
		&:before {
			content: "";
			position: absolute;
			height: 0;
			width: 0;
			top: (-17/11)*$size;
			left: (-1/3)*$size;
			border-width: 0 (5/6)*$size (35/54)*$size;
			border-style: solid;
			border-color: transparent transparent $color;
		}
	}
	
	@if $shape == hexagon {
		width: $size*2;
		height: $size*1.1;
		background: $color;
		position: relative;
		&:before {
			content: "";
			position: absolute;
			top: $size/-2;
			left: 0;
			width: 0;
			height: 0;
			border-left: $size solid transparent;
			border-right: $size solid transparent;
			border-bottom: $size/2 solid $color;
		}
		&:after {
			content: "";
			position: absolute;
			bottom: $size/-2;
			left: 0;
			width: 0;
			height: 0;
			border-left: $size solid transparent;
			border-right: $size solid transparent;
			border-top: $size/2 solid $color;
		}
	}
	
	@if shape == octogon {
		width: $size;
		height: $size;
		background: transparent;
		position: relative;
		text-align: center;
	
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			border-bottom: 29/$size solid $color;
			border-left: 29/$size solid transparent;
			border-right: 29/$size solid transparent;
			width: 42/$size;
			height: 0;
		}
		
		&:after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			border-top: 29/$size solid $color;
			border-left: 29/$size solid transparent;
			border-right: 29/$size solid transparent;
			width: 42/$size;
			height: 0;
		}
	}
}