Responsive Foundation 6.0.0

Sidebar

Utilities » Mixins AngleLink

Since: 2.0.0 New Issue

A 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.
Source: _mixins.scss, line 1185 View Source