jQuery Plugin For Responsive SVG Slanted Backgrounds - polygonMaskJS

polygonMaskJS is a lightweight jQuery plugin which makes use of SVG polygon clip masks to create responsive slanted backgrounds. Currently only supports slanted separators, but can easily be expanded to include custom polygon point strings.

Basic usage:

1. Load the latest version of jQuery JavaScript library and the jQuery polygonMaskJS plugin at the end of the document.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="90-polygonMask.jquery.js"></script>

2. Call the .polygonMask() function on any jQuery object to create a slanted module that supports full-width backgrounds. Currently has 0 support for IE as it relies on SVG clipPath.

$('.banner').polygonMask()

3. Pass the 'direction' parameter to the the .polygonMask() function that determines the direction of the slant. Currently only supports two arbitrary directions (down and up)

$('.banner').polygonMask('down')
// or
$('.banner').polygonMask('up')

Change log:

2016-10-01

• Bugfix for Chrome 53, support for Chrome <52

---

This awesome jQuery plugin is developed by roseg43. For more Advanced Usages, please check the demo page or visit the official website.