angled-edges

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angled-edges
97412.0.06 years ago6 years agoMinified + gzip package size for angled-edges in KB

Readme

Angled Edges :triangularruler: Build Status Bower version Donate
A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
angled edge

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 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 | | $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.
  • x IE 9+
  • x Edge
  • x Firefox
  • x Chrome
  • x Safari
  • x Opera
  • x iOS Safari
  • x Opera Mini
  • x Android Browser
  • x Chrome for Android

Project Ports