Arbitrary CSS Triangles

Click in 3 points to get CSS Triangles

by andrewray

HTML

<div id="grid">
</div>
<div class="controls">
    <div class="controlgroup">
        <label for="spin">Spin them</label>
        <input type="radio" name="spin" value="spin!" id="spin" />
        <label for="nospin">Stop them</label>
        <input type="radio" name="spin" value="no spin" checked id="nospin" />
    </div>
    <div class="controlgroup">
        <button id="clear">clear</button>
    </div>
    <div class="controlgroup">
        <label for="dots">Show Dots</label>
        <input type="radio" name="dots" value="dots!" id="dots" checked />
        <label for="nodots">No Dots</label>
        <input type="radio" name="dots" value="no dots" id="nodots" />
    </div>
</div>

CSS

html, body {
    font-family:sans-serif;
}
#grid{
    position:absolute;
    width:400px;
    height:200px;
}
.controls {
    position:absolute;
    top:220px;
    background:#eee;
    padding:10px;
    box-shadow:0 0 10px #aaa;
}
.controlgroup {
    background:#666;
    color:#eee;
    padding:2px 10px;
    margin:2px;
    float:left;
    box-shadow:1px 1px 3px #888;
    line-height:26px;
}
.dot0, .dot1, .dot2, .dot3 {
    width:3px;
    height:3px;
    background:red;
    position:absolute;
    border-radius:5px;
    z-index:1;
    border:1px solid red;
}
.nodots .dotty {
    display:none !important;
}
.dot0 {
    border-color:magenta !important;
    background:magenta !important;
    z-index:2 !important;
}
.dot2 {
    border-color:green !important;
    background:green !important;
    z-index:2 !important;
}
.dot3 {
    border-color:blue !important;
    background:blue !important;
    z-index:3 !important;
}
.space {
    width:1px;
    height:1px;
    background:blue;
    position:absolute;
}

.triangle {
    /*background:yellow;*/
    position:absolute;
    border:1px solid;
    border-bottom:0 none;
    border-right-color:transparent !important;
    border-left-color:transparent !important;
    width:0;
    height:0;
    opacity:0.5;
}
.t1, .t2 {
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:0;
}
.t1 {
    border-top: 1px solid blue;
    border-left: 1px solid transparent;
}
.t2 {
    border-top: 100px solid orange; 
    border-right: 100px solid transparent; 
}

JavaScript

var $grid = $('#grid'),
    height = $grid.height(),
    width = $grid.width(),
    gridSpacing = 10,
    dotLimit = 1,
    spin = 0;

for (var x = 0; x <= width; x += gridSpacing) {
    for (var y = 0; y <= height; y += gridSpacing) {
        $('<div class="space"></div>').css({
            top: y + 'px',
            left: x + 'px'
        }).appendTo($grid);
    }
}

var makeTriangle = function(point1, point2, point3, color) {
    var x = 0,
        y = 1;
    dot(point1, 1);
    dot(point2, 1);
    dot(point3, 1);

    var points = [point1, point2, point3];
    var triangleCenter = [
        (point1[x] + point2[x] + point3[x]) / 3,
        (point1[y] + point2[y] + point3[y]) / 3,
        ];
    var leftToRightOrig = points.slice(0).sort(leftMostSort);

    var longest = getFarthestPoints(points);

    dot(points[longest[0]], 2);
    dot(points[longest[1]], 2);

    var higher = longest[0][y] > longest[1][y] ? 0 : 1,
        lower = (~higher) + 2,
        highestPoint = points[longest[higher]],
        lowestPoint = points[longest[lower]];

    var shifter = [
        -1 * (triangleCenter[0]),
        -1 * (triangleCenter[1])
        ];
    var translated = [
        shift(point1, shifter),
        shift(point2, shifter),
        shift(point3, shifter)
        ];

    var angleDeg = angleBetween(highestPoint, lowestPoint),
        rotateAngleDeg = angleDeg;

    if (angleDeg > 0 && angleDeg < 90) {
        angleDeg = -angleDeg;
    } else if (angleDeg > 90) {
        angleDeg = 180 - angleDeg;
    } else if (angleDeg < -90 && angleDeg > -180) {
        angleDeg = -(180 + angleDeg);
    } else {
        angleDeg = -angleDeg;
    }

    if (rotateAngleDeg < 90 && rotateAngleDeg > -90 && isLeft(highestPoint, lowestPoint, points[longest[2]])) {
        angleDeg += 180;
    } else if ((rotateAngleDeg > 90 || rotateAngleDeg < -90) && !isLeft(highestPoint, lowestPoint, points[longest[2]])) {
        angleDeg += 180;
    }

    var unshifter = [
       ...