jQuery Plugin To Add Angled Borders To Html Elements

File Size: 6.71 KB
Views Total: 1107
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Add Angled Borders To Html Elements

A fancy jQuery plugin that which enables you to apply angled borders to any Html elements.

How to use it:

1. Load jQuery library and the jQuery Angled Borders plugin in your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery-angled-border.js"></script>

2. Apply an angled border to your container element and pass the options via data-* attributes.

<div class="angled-border" data-position="top" data-direction="rtl">
  ...
</section>

3. Call the plugin and done.

$('.angled-border').angledBorder();

4. You can also pass the options with Javascript options object as shown below.

$('.angled-border').angledBorder({
height: 30, // in px
color: 'inherit', // hex value
direction: 'LTR', // or RTL
position: 'bottom' // or top
});

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