JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<div id="main">
<div id="p1">
</div>
<div id="p2">
</div>
</div>

CSS

div#main{
    width: 500px;
    display: table;
}
#p1{
position: absolute;
  width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #007bff transparent transparent transparent;
line-height: 0px;
_border-color: #007bff #000000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
#p2{
  position: absolute;
  width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff transparent;
line-height: 0px;
_border-color: #000000 #000000 #007bff #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}