JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="triangle-up blue">

</div>

CSS

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}

.triangle-up:after {
    content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
}

 .triangle-up.blue:after {
  border-bottom: 500px solid blue;
}

.triangle-up.red:after{
  border-bottom: 500px solid red;
}

.triangle-up.purple:after{
  border-bottom: 500px solid purple;
}


.triangle-up.yellow:after{
  border-bottom: 500px solid yellow;
}

.triangle-up.orange:after{
  border-bottom: 500px solid orange;
}

.triangle-up.green:after{
  border-bottom: 500px solid green;
}

JavaScript

var cachedColorName;

var colorCollection = ['red', 'blue', 'purple', 'yellow', 'orange', 'green']

$(document).ready(function() {
setInterval(function(){ 
var newColor = randomItem(colorCollection); //(here you'd want to randomnly find a color that you have in your css
    changeColor(newColor); 
}, 3000);});

function changeColor(colorName) {
    $('.triangle-up').removeClass(cachedColorName);
    $('.triangle-up').addClass(colorName);
    cachedColorName = colorName;
}

function randomItem(collection) {
return collection[Math.floor(Math.random()*collection.length)];
}