Simple Angled Mixin - https://fewerthanthree.com/angled/using-sass-mixin-to-create-anlgled-sections
@mixin angled( $background-color, $reversed: false, $height: '1.5deg' ) { | |
position: relative; | |
&::before, | |
&::after { | |
display: block; | |
background-color: $background-color; | |
right: 0; | |
content: ''; | |
height: 50%; | |
z-index: -1; | |
} | |
&::before { | |
top: 0; | |
transform: skewY( #{$height} ); | |
transform-origin: top right; | |
} | |
&::after { | |
bottom: 0; | |
transform: skewY( #{$height} ); | |
transform-origin: bottom left; | |
} | |
@if $reversed { | |
&::before { | |
transform: skewY( -#{$height} ); | |
transform-origin: top left; | |
} | |
&::after { | |
transform: skewY( -#{$height} ); | |
transform-origin: bottom right; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment