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.blue:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-bottom: 500px solid blue;
}

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

JavaScript

var cachedColorName;

$(document).ready(function() {
setInterval(function(){ 
var newColor = 'red'; //(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;
}