Triangle in CSS

by iamanubhavsaini

HTML

<script src="https://raw.github.com/jquery/jquery-color/master/jquery.color.js"></script>
Click on it
<div class="border"></div>

CSS

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

JavaScript

(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
            .animate({
                'border-top-width': 0
            }, duration)
            .animate({
                'border-left-width': 30
                
            }, duration)
            .animate({
                'border-right-width': 30
                
            }, duration)
            .animate({
                'border-bottom-width': 80
                
            }, duration)
            .animate({
                'width': 0
            }, duration)
            .animate({
                'height': 0
            }, duration)
            .animate({
                'borderRightColor': 'transparent'
            }, duration)
            .animate({
                'borderLeftColor': 'transparent'
            }, duration)
            
    }).end()
}(jQuery))