Angled Edges 📐

A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.

Usage

Import partial:

@import "angled-edges";

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.

Parameter	Description
`$location`	Location of shape relative to parent element 'inside top' 'outside top' 'inside bottom' 'outside bottom'
`$hypotenuse`	Side of the right triangle that the hypotenuse is on 'upper left' 'upper right' 'lower left' 'lower right'
`$fill`	Fill color of triangle
`$width`	Width of triangle - 2800px default
`$height`	Height of triangle - 100px default

Anywhere SVG is supported.