Angled-edges NPM

Angled Edges :triangular_ruler:

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);

The main mixin creates an svg right triangle that is encoded, set as a background image of a pseudo element, and absolutely positioned.

Options

Parameter	Description
`$location`	Location of shape relative to parent element inside topoutside topinside bottomoutside bottom
`$hypotenuse`	Side of the right triangle that the hypotenuse is on upper leftupper rightlower leftlower right
`$fill`	Fill color of triangle
`$height`	Optional - Height of triangle - Accepts a unitless integer that is equivalent to height in `px`
`$width`	Optional - Width of triangle - Accepts a unitless integer that is equivalent to width in `px` (If nothing is passed triangle will span to a 100% fluid width)

Upgrading from 1.x

Version 2 now defaults with a fluid width of 100%. Since this is the preferred value, width and height parameters have switched order with height now being first. This allows for easier usage where

@include angled-edge('outside bottom', 'lower right', 150)

now means a 150px tall with at a default of 100% width. If a fluid width is not needed, you can still pass in a unitless width like in 1.x.

Demo

http://angled-edges.josephfus.co

Browser Support

Anywhere SVG is supported.

IE 9+
Edge
Firefox
Chrome
Safari
Opera
iOS Safari
Opera Mini
Android Browser
Chrome for Android

Project Ports

Stylus Angled Edges

svg angled edges css

@kpisense/waterfall-component @everything-registry/sub-chunk-1131 @kpisense/core-components

2.0.0

7 years ago