JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<div class="top"></div>
<div class="bottom"></div>

CSS

.top {
    position : absolute;
    top      : 8px;
    left     : 16px;
    width    : 0;
    height   : 0;
    z-index  : 100;
    
    border-left   : 50px solid transparent;
    border-right  : 50px solid black;
    border-bottom : 50px solid transparent;
    
    transform: rotate(45deg);
}
.bottom {
    position : absolute;
    width    : 0;
    height   : 0;
    z-index  : 99;
    transform: rotate(45deg);
    border-left   : 60px solid transparent;
    border-right  : 60px solid red;
    border-bottom : 60px solid transparent;
}