JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="direction" value="Change Direction">
<br>
<input type="button" id="color" value="Change Color">
<div id="demo" class="triangle-down-right"></div>

CSS

.relative-wrap {
  position: relative;	
  min-height: 150px;
}

.triangle-down-right,
.triangle-down-left {
	width: 50%;
	height: 0;
	padding-top: 54%;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
}
	
.triangle-down-right:after,
.triangle-down-left:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-top:-500px;
	border-top: 500px solid transparent;
}

.triangle-down-right:after {
  border-right: 500px solid #4679BD;
}

.triangle-down-left:after {
  border-left: 500px solid #4679BD;
}

.triangle-down-right.alt:after,
.triangle-down-left.alt:after {
  border-color: transparent #D4679B transparent;
}

JavaScript

document.getElementById('direction').addEventListener('click', function(){
	var d = document.getElementById('demo');
  d.className = (d.className.replace(' alt','') === "triangle-down-right") ? d.className.replace('right','left') : d.className.replace('left','right');
});

document.getElementById('color').addEventListener("click", function(){
	var d = document.getElementById('demo');
	console.log(d.className);
	d.className = (d.className.slice(-3) === "alt") ? d.className.replace(' alt','') : d.className + ' alt';
});