SASS Mixin For Angled Borders

Category: CSS & CSS3 , Recommended | June 17, 2016
Views Total:533 views
Official Page:Go to website
Last Update:June 17, 2016


SASS Mixin For Angled Borders


A SASS mixin that helps you apply SVG based angled / slanted border effect to any page sections.

How to use it:

Import the angled-edges.

@import "angled-edges";

Customize the angled borders with the following parameters.

  • $location: Location of shape relative to parent element:’inside top’, ‘outside top’, ‘inside bottom’ or ‘outside bottom’.
  • $hypotenuse: Side of the right triangle that the hypotenuse is on: ‘upper left’, ‘upper right’, ‘lower left’, or ‘lower right’.
  • $fill: Fill color of triangle
  • $width: Width of triangle – 1500px default
  • $height: Height of triangle – 80px default

You Might Be Interested In:

Leave a Reply