JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<div class="main">

<div class="ltre"> </div>
 <div class="ltre2"> </div>


<div class="rtre"> </div>
 <div class="rtre2"> </div>
 


</div>

CSS

.ltre{
    position: absolute; 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 92px 0 0 84px;
    border-color: transparent transparent transparent #843AC9;
  
}
.ltre2{
      position: absolute;
   
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 76px 0 0 67px;
    z-index: 1;
    border-color: transparent transparent transparent #143AC9;
}



.rtre{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 34px 76px;
    border-color: transparent transparent #843ac9 transparent;
}

.rtre2{
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 21px 51px;
    border-color: transparent transparent #143ac9 transparent;    
}

.main{
      height: 257px;
    background-color: green;
    width: 200px;
 overflow:hidden;
  zoom:1;
  position:relative;
}
.ltre, .ltre2, .rtre, .rtre2 {
position: absolute;}

.ltre, .ltre2 {
  left:0;bottom:0;}
 .rtre, .rtre2 {
   right:0;bottom:0;
 }