Angled edges (SASS mixin)

Add a consistent angled edge to a full width element.

This technique uses CSS clip-path to clip the image but has a fallback using pseudo elements for older browsers.
It is only intended for use on full width elements as it uses the vw unit to calulate the angle.


Top left


Bottom left


Top and bottom


Backgound Colour

Background colour


Download Download CSS View on GitHub


Once you have downloaded the code, run the commands below to view the demo site.

$ npm install
$ gulp serve

You can also import angled-edges.scss into your own project directly and use the classes already setup or use the mixin in your own classes.

Inspired by Kilian Valkhof and Viget
Image from Wikimedia Commons