JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rect">
    
    
</div>

<div class="rect2">
    
</div>

CSS

.rect{
   width:200px;
   height:200px;
   background:#f00;
   position:relative;
}
.rect2{
    width:200px;
    clip-path: polygon(0px 200px,20px 200px,10px 10px,40px 40px);
    -webkit-clip-path:polygon(0px 200px,20px 200px,10px 10px,40px 40px);
    height:200px;
    background:#0f0;
    position:relative;
}
.rect:before{
   content:'';
   border-left:60px solid transparent;
   border-right:20px solid transparent;
   border-top:20px solid #fff;
   position:absolute;
   top:0;
   right:-20px;
}