Add Angled Edges To Any Elements – angled-edges

Category: CSS & CSS3 | October 19, 2018
Views Total:438 views
Official Page:Go to website
Last Update:October 19, 2018


Add Angled Edges To Any Elements – angled-edges


Similar to the josephfusco’s angled-edges, this SASS mixin allows you to create angled edges on elements without the need of SVG element.

How to use it:

Install and import the angled-edges into your project.

$ npm install angled-edges --save

Add angled edges to elements. Supported location parameters:

  • Top
  • Left
  • Bottom
  • Right
  • Both
<div class="angle--top-left">
  element here

Customize the ‘angled-edges’.

  • $angle: The angle in degrees: 1 – 45
  • $angle-position-y: The Y position of the angle: top | bottom | both
  • $angle-position-x: The X position of the angle: left | right
  • $angle-position-bottom-x: The X position of the bottom angle if using ‘both’ for $angle-position-y: left | right
  • $fallback: Create a fallback for older browsers: true | false
  • $fallback-color: Fallback colour for older browsers: Hex color



  • Bugfix

You Might Be Interested In:

Leave a Reply