CSS Ruby
Clone or download
Latest commit 714d595 Nov 16, 2017
Failed to load latest commit information.
test Update test.scss Aug 1, 2016
.gitattributes Ignore package.json Feb 23, 2017
.gitignore Initial commit Jun 15, 2016
.travis.yml Remove whitespace Jun 20, 2016
LICENSE Fluid options Feb 10, 2017
README.md Update README.md Nov 16, 2017
_angled-edges.scss Fix version numbers Feb 11, 2017
bower.json Fix version numbers Feb 11, 2017
package.json Add npm support Feb 11, 2017
sache.json Add sache Jun 20, 2016


Angled Edges 📐 Build Status Bower version npm version

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

angled edge


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.


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. If you previously were using background-size to manipulate the shape, you will need to remove this property as the mixin also uses this to assist with making the shape full-width.



Browser Support

Anywhere SVG is supported.

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

Project Ports