JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="triangle"></div>
    <div class="triangle"></div>
    <div class="triangle"></div>
    <div class="triangle"></div>
</div>

<div class="wrapper rotate">
    <div class="triangle"></div>
    <div class="triangle"></div>
    <div class="triangle"></div>
    <div class="triangle"></div>
</div>

CSS

.wrapper {width:200px; height:200px; margin:50px; position:relative; border:1px solid #f00;}
.rotate {transform:rotate(45deg);}

.triangle {width:0; height:0; position:absolute; left:0; right:0; top:0; margin:auto; border:100px solid rgba(0,0,0,0); border-bottom-width:0px !important; border-top-color:#333 !important; border-style:solid; border-color:transparent; box-sizing:border-box; transform-origin: center bottom;}

.triangle:nth-child(2) {transform:rotate(90deg)}
.triangle:nth-child(3) {transform:rotate(180deg)}
.triangle:nth-child(4) {transform:rotate(270deg)}