Utilities » Mixins AngleLink
Since: 2.0.0 New IssueA mixin to quickly add angles to an element. Uses before/after pseudo classes. Based on Jeremy Frank's work here: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms
Examples
Add a 1.5 degree angle, slanted right, to the bottom of a callout.
.callout {
@include angle( after );
}
Add angles to both edges of a callout.
.callout {
@include angle( both );
}
Add a 2.5 degree angle, slanted right, to the top of a callout.
.callout {
@include angle( before, false, 2.5deg );
}
Parameters:
-
@param {string} | $pseudo [after]
The pseudo-element to apply the angle to. Use before to get an angle on top, after to get an angle on bottom. -
@param {bool} | $flip [false]
Whether or not to flip the default angle slant. By default, the angle will slant upwards to the right. -
@param {deg} | $angle [1.5deg]
The number of degrees to slant the angle at.
_mixins.scss, line 1185
View Source