jQuery Plugin To Divide An Element Into Four Triangles - whichTriangle

whichTriangle is a lightweight jQuery plugin that allows to divide an html element into four triangles for particular needs in web design. It also has the ability to test co-ordinates on the triangles that extracts the client co-ordinates from the event object and returns which triangle those co-ordinates fall in. If they don't fall in any triangle then it returns -1.

Basic Usage:

1. Include jQuery javascript library and jQuery whichTriangle plugin on the web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="lib/whichTriangle.min.js"></script>

2. Create the html

<div id="test" class=""></div>

3. The sample CSS

#test:after {
position: absolute;
top: 0;
left: 0;
display: block;
content: "";
background-color: transparent;
height: 0px;
width: 0px;
}
.zero:after {
border-top: 150px solid blue;
border-bottom: 150px solid transparent;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
}
.one:after {
border-top: 150px solid transparent;
border-bottom: 150px solid transparent;
border-left: 200px solid transparent;
border-right: 200px solid blue;
}
.two:after {
border-top: 150px solid transparent;
border-bottom: 150px solid blue;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
}
.three:after {
border-top: 150px solid transparent;
border-bottom: 150px solid transparent;
border-left: 200px solid blue;
border-right: 200px solid transparent;
}

4. The javascript

<script>
$(document).ready(function() {
$('div#test').setupTriangles().mousemove(function(e) {
$this = $(this);
switch ($this.whichTriangle(e)) {
case 0:
$this.removeClass().addClass('zero');
break;
case 1:
$this.removeClass().addClass('one');
break;
case 2:
$this.removeClass().addClass('two');
break;
case 3:
$this.removeClass().addClass('three');
break;
default:
$this.removeClass();
}
}).mouseout(function() {
$(this).removeClass()
});
});
</script>

Change log:

0.2.0 (2013-10-02)

• Code rewrite and one more feature added
• Updated examples and added metro tile example

---

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