Add Angled Edges To Any Elements – angled-edges

Category: CSS & CSS3 | October 19, 2018
Author: NigelOToole
Views Total: 435 views
Official Page: Go to website
Last Update: October 19, 2018
License: MIT

Preview:

Add Angled Edges To Any Elements – angled-edges

Description:

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
$ 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
</div>

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

Changelog:

10/19/2018

  • Bugfix

You Might Be Interested In:


Leave a Reply