JSFiddle - React, Tailwind, and code Playground

by azizul

HTML

<div class='rhombus'></div>

CSS

.rhombus { 
    content: '';
    width: 0; 
    height: 0; 
    left: 0;
    border-bottom: 20px solid black; 
    border-left: 500px solid rgba(255, 255, 255, 0);
    /* Maintain smooth edge of triangle in FF */
    -moz-transform: scale(.9999);
}