JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangle"></div>

CSS

.triangle {
  width:300px;
    height:300px;
    background:#000;
     position:relative;  
}
.triangle:after {
content:"";
    position:absolute;
    display:block;
    border-style:solid;
    border-width:140px 300px 0 0;
    border-color:rgba(255,255,255, 0.5) transparent;
    left:0;
    top:0;
}