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.