Edge skew mixin from GeekyLibrary

_mixin-edge-skew.scss

// edge-skew
// Applies a psudo element ot the left or right of an element
// that skews that edge. Basically adds a triangle of a given
// color in a direction
// @param $direction 'left'|'right'
// @param $color color
@mixin edge-skew( $direction, $color ) {
	position: relative;

	$pseudo: if($direction == left, before, after);

	&:#{$pseudo} {
		content: ' ';
		position: absolute;
		height: 100%;
		background: $color;
		min-width: 5px;
		width: 7%;
		transform: skew(-$branded-skew);

		@if $direction == right {
			right: 0;
			transform-origin: bottom left;
		}

		@if $direction == left {
			left: 0;
			transform-origin: top left;
		}

		top: 0;
	}
}