Skip to content

Instantly share code, notes, and snippets.

@BeardedGinger
Created July 9, 2018 11:53
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
@mixin angled( $background-color, $top: true, $bottom: true, $reversed: false, $height: '1.5deg' ) {
position: relative;
@if $top {
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
height: 50%;
width: 100%;
background-color: $background-color;
z-index: -1;
}
}
@if $bottom {
&::after {
display: block;
position: absolute;
bottom: 0;
left: 0;
content: '';
height: 50%;
width: 100%;
background-color: $background-color;
z-index: -1;
}
}
@if $reversed {
&::before,
&::after {
transform: skewY( -#{$height} );
}
&::before {
top: 0;
transform-origin: top left;
}
&::after {
bottom: 0;
transform-origin: bottom right;
}
} @else {
&::before,
&::after {
transform: skewY( #{$height} );
}
&::before {
transform-origin: top right;
}
&::after {
transform-origin: bottom left;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment