Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Aug 1, 2016
Jun 15, 2016
Feb 10, 2017
Jun 20, 2016

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

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.

Examples

https://codepen.io/fusco/pen/mzymKm

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. 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.

Demo

https://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