Using Sass Mixin to Create Anlgled Sections
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
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.
When we used this mixin for a client project, we created a group of helper mixins.
We applied two helper mixins, an angled-top-* mixin and an angled-bottom-* mixin, to each angled element:
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.