Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

You can’t perform that action at this time.