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: 40%;
    border: solid 1px black;
    width: 20%;
}

#base2 {
    width: 30%;
    left: 25%;
}
#base3 {
    width: 33%;
    height: 60%;
    left: 62%;
}

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