Skip to content

Instantly share code, notes, and snippets.

@BeardedGinger
Created July 9, 2018 11:53
Show Gist options
  • Save BeardedGinger/228ad104db751e82259bda1f7a21a484 to your computer and use it in GitHub Desktop.
Save BeardedGinger/228ad104db751e82259bda1f7a21a484 to your computer and use it in GitHub Desktop.
@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