JSFiddle - React, Tailwind, and code Playground

HTML

<DIV class="cell">Own comment<span class="triangle triangleSingle"></span></DIV>
<DIV class="cell">Ancestor<span class="triangle triangleSingleAnc"></span></DIV>
<DIV class="cell">Descendants<span class="triangle triangleSingleDes"></span></DIV>
<DIV class="cell">Own date range<span class="triangle triangleSingleDrange"></span></DIV>
<DIV class="cell">Own and ancestor<span class="triangle triangleDouble"></span></DIV>

<DIV class="cell">Own and descendants<span class="triangle triangleTriple"></span></DIV>
<DIV class="cell">Own+anc.+desc.<span class="triangle triangleQuad"></span></DIV>

CSS

.cell {
    border-color: grey;
    border-style: solid;
    border-width: 1px;
    width:200px;
    height:30px;  
    margin-bottom:10px;
}
.triangle {
border-color: red red transparent transparent;
border-style: solid;
border-width: 5px 5px 5px 5px;
height: 0px;
width: 0px;
float: right;
}
.triangleSingle {
border-color: red red transparent transparent;
}
.triangleSingleAnc {
border-color: blue blue transparent transparent;
}
.triangleSingleDes {
border-color: green green transparent transparent;
}
.triangleSingleDrange {
border-color: lime lime transparent transparent;
}
.triangleDouble {
border-color: red blue transparent transparent;
}

.triangleTriple {
border-color: red green transparent transparent;
}

.triangleQuad {
border-color: red blue transparent  green ;
}