Skip to content

Instantly share code, notes, and snippets.

@tddewey
Created June 29, 2014 19:07
Show Gist options
  • Save tddewey/46630f8c4daff34283d5 to your computer and use it in GitHub Desktop.
Save tddewey/46630f8c4daff34283d5 to your computer and use it in GitHub Desktop.
Edge skew mixin from GeekyLibrary
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment