JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangle_up" >
	</div>
	<br/>
	<div class="triangle_down" >
	</div>
	<div class="triangle_left" >
	</div>
	<div class="triangle_right" >
	</div>
	<div  class="crossSquare">
	</div>

CSS

.triangle_up
		{
		  height:0px; width:0px;
		  border-bottom:50px solid #006633;
		  border-left:50px solid transparent;
		  border-right:50px solid transparent;
		}
		.triangle_down
		{
		  height:0px; width:0px;
		  border-top:50px solid #006633;
		  border-left:50px solid transparent;
		  border-right:50px solid transparent;
		}
		.triangle_left
		{
		  height:0px; width:0px;
		  border-left:50px solid #006633;
		  border-top:50px solid transparent;
		  border-bottom:50px solid transparent;
		  /*float:left;*/
		}
		.triangle_right
		{
		  height:0px; width:0px; /*float:left;*/
		  border-right:50px solid #006633;
		  border-top:50px solid transparent;
		  border-bottom:50px solid transparent;
		}
		.crossSquare
		{
		  height:0px; width:0px;
		  border-right:50px solid blue;
		  border-top:50px solid gray;
		  border-bottom:50px solid red;
		  border-left:50px solid yellow;
		}