JSFiddle - React, Tailwind, and code Playground

HTML

<div class="base" id="base1">
    <div class="triangle"></div>
</div>
<div class="base" id="base2">
    <div class="triangle"></div>
</div>
<div class="base" id="base3">
    <div class="triangle"></div>
</div>

CSS

.base {
    left: 0px;
    top: 0px;
    position: absolute;
    height: 100px;
    border: solid 1px black;
    width: 100px;
}

#base2 {
    width: 150px;
    left: 120px;
}
#base3 {
    width: 150px;
    height: 140px;
    left: 320px;
}

.triangle {
    width: 40%;
    height: 40%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, black 50%, transparent 50%)
}