JSFiddle - React, Tailwind, and code Playground

HTML

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

CSS

#triangle-topright {
	width: 0;
	height: 0;
	border-top: 40px solid red;
	border-left: 100px solid transparent;
}

#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 40px solid red;
	border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}