As designers look to create websites that stand out from the crowd, the use of different shapes and section transitions has become more popular. One of the more common ones we’ve seen lately is angled backgrounds between sections. When working with these, instead of repeating the same CSS every time we’d like to create these angled sections, we can use Sass mixins to save time.
Simple Mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} | |
} | |
} |
The first thing you’ll probably notice about this simple mixin is that it creates pseudo-elements with the same background color as the element that will have the angled background and then skews those pseudo-elements to create the angles, which has the effect of expanding the angled element. The benefit of doing this is that you don’t risk cutting off the text inside the angled element like you would if you created the angles by using pseudo-elements to remove the background of the angled element.
By default, the higher side of the slant is on the left, but by setting $reversed: true
, we can change that.
Advanced Mixin
The simple mixin works well for most situations, but there are times when you’ll want to set different slant directions or even hide the slant on one side entirely. For that, we’ll use a different mixin.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} | |
} | |
} |
When we used this mixin for a client project, we created a group of helper mixins.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin angled-top-left( $background-color: $primary-brand-color ) { | |
@include angled( $background-color: $background-color, $top: true, $bottom: false, $reversed: false ); | |
} | |
@mixin angled-top-right( $background-color: $primary-brand-color ) { | |
@include angled( $background-color: $background-color, $top: true, $bottom: false, $reversed: true ); | |
} | |
@mixin angled-bottom-left( $background-color: $primary-brand-color ) { | |
@include angled( $background-color: $background-color, $top: false, $bottom: true, $reversed: true ); | |
} | |
@mixin angled-bottom-right( $background-color: $primary-brand-color ) { | |
@include angled( $background-color: $background-color, $top: false, $bottom: true, $reversed: false ); | |
} |
We applied two helper mixins, an angled-top-*
mixin and an angled-bottom-*
mixin, to each angled element:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.angled-element { | |
@include angled-top-left; | |
@include angled-bottom-right; | |
} |
This creates the same look as the simple mixin above. If we wanted to create a trapezoid instead, or apply the angle to just the top or the bottom of the element, it’s a simple matter of swapping in the appropriate mixins.
Leave a Reply