JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangle a"></div>
<div class="triangle b"></div>
<div class="triangle c"></div>
<div class="triangle d"></div>

CSS

.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: red #007bff green orange;
}

.a {
    border-width: 200px 200px 200px 200px;
}

.b {
    border-width: 100px 200px 200px 100px;
}

.c {
    border-width: 10px 200px 200px 10px;
}

.d {
    border-width: 0 200px 200px 0;
    border-color: transparent #007bff transparent transparent;
}