JSFiddle - React, Tailwind, and code Playground
HTML
<div id="element"></div>
CSS
#element {
width: 100px;
height: 60px;
background-repeat: none;
background-color: #ccf;
mask-image: url('https://rawgit.com/SergioCrisostomo/version-files/master/triangle.svg');
-webkit-mask-image: url('https://rawgit.com/SergioCrisostomo/version-files/master/triangle.svg');
transition: background-color .8s;
}
JavaScript
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var element = document.getElementById('element');
setInterval(function () {
element.style.backgroundColor = getRandomColor();
}, 1000);