A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
This mixin has 3 required parameters: location, hypotenuse, fill
@include angled-edge($location, $hypotenuse, $fill, $width: 2800, $height: 100);
The main mixin creates an svg right triangle that is encoded, set as a background image of a pseudo element, and absolutely positioned.
||Location of shape relative to parent element
||Side of the right triangle that the hypotenuse is on
||Fill color of triangle|
||Optional - Width of triangle (2800px default)|
||Optional - Height of triangle (100px default)|
Anywhere SVG is supported.
- IE 9+
- iOS Safari
- Opera Mini
- Android Browser
- Chrome for Android