JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

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

CSS

.top {
    position : absolute;
    top      : 6px;
    left     : 10px;
    width    : 0;
    height   : 0;
    z-index  : 100;
    
    border-left   : 50px solid transparent;
    border-right  : 50px solid transparent;
    border-bottom : 50px solid black;
}
.top:hover {
    top : 10px;
}
.bottom {
    position : absolute;
    width    : 0;
    height   : 0;
    z-index  : 99;
    
    border-left   : 60px solid transparent;
    border-right  : 60px solid transparent;
    border-bottom : 60px solid red;
}
#container {
    position : relative;
    top      : 25px;
    left     : 25px;
}