- ×
:triangular_ruler: Quickly create angled section edges using only Sass
Filed under helpers › object extendsShow AllAngled Edges :triangular_ruler:
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.
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.
- [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