JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
<div class="ribbon-bottom"></div>
</div>

CSS

.box {
height: 50px;
width: 38px;
padding: 25px 31px 15px 31px;
background: #000;
position: relative;
}
            
.ribbon-bottom {
border-color: #000 transparent transparent transparent;
border-style: solid;
border-width: 50px;
height: 0;
width: 0;
position: absolute;
bottom: -100px;
left: 0px;
}

.ribbon-bottom:before {
    width: 100px;
    content: " ";
    height: 1px;
    background-color: red;
    position: absolute;
    top: -50px;
    left: -50px;
    
}