Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Angled Edges 📐 Build Status Bower version npm version

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

Need angled edges in regular CSS? Check out the Angled Edges Generator.

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