JSFiddle - React, Tailwind, and code Playground

by mendesjuan

HTML

<div id ="ct" >
    <div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
    <div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
    <br/>
    <div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
    <div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>

CSS

.triangle {
    border: 50px solid transparent;
    display: inline-block;    
    width: 0;
    height: 0;
    margin:0;
    padding: 0;
}

.triangle-se {
    border-color: red red blue blue;
}

.triangle-sw {
    border-color: red blue blue red;
}

.triangle-nw {
    border-color: blue blue red red;
}

.triangle-ne {
    border-color: blue red red blue;
}

.triangle-hide-tl {
    border-top-color: transparent;
    border-left-color: transparent;
}

.triangle-hide-tr {
    border-top-color: transparent;
    border-right-color: transparent;    
}

.triangle-hide-br {
    border-bottom-color: transparent;
    border-right-color: transparent;        
}

.triangle-hide-bl {
    border-bottom-color: transparent;
    border-left-color: transparent;        
}

/**
  t rid of spacing around the triangles
*/
#ct {
    font-size: 0;
}

JavaScript

setInterval((function(){
    var index = 0;
    return function() {
        // Which square is going to be modified in each stage (16 stages)
        var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
        // The clases to add and remove
        var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];
        var el = $('#ct div.triangle').eq(map[index]);
        if (index < 8) {
            console.log()
            el.removeClass('triangle-hide-' + classesToChange[index] );
        } else {
            el.addClass('triangle-hide-' + classesToChange[index - 8] );
        }
        index++;
        if (index >= 16) {
            index = 0;
        }
    };
})(), 200);