SASS Mixin For Angled Borders

Author: josephfusco
Views Total: 520 views
Official Page: Go to website
Last Update: June 17, 2016
License: MIT


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

See also  Simple Clean Pure CSS3 Dropdown Menu

Leave a Reply

Your email address will not be published. Required fields are marked *