JSFiddle - React, Tailwind, and code Playground

HTML

<div class='demo-set'>
            <div id="border-demo"></div>
            <div id="hourglass-demo" ></div>
        </div>
    <p class="image-caption-text" >Left showing a div set to 0px x 0px &amp; 
        the borders as 50px.&nbsp;&nbsp;Right showing a div with the left &amp; 
        right borders as transparent. </p>

CSS

/** Shows borders for demo purposes. */
    #border-demo,
    #hourglass-demo{
        min-height: 0px;
        width: 0px;
        height: 0px;
        /** Yellow */
        border-left: 50px #ffe693 solid;
        /** Blue */
        border-top: 50px #939cff solid;
        /** red */
        border-right: 50px #ff9d93 solid;
        /** green */
        border-bottom: 50px #b5ff93 solid;
        
        background: none;
    }
    
    #hourglass-demo {
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }
        
    .demo-set {
        min-height: 130px;
        width: 300px;
        margin: auto;
    }
    .demo-set > *:first-child{
        float: left;
        margin: 10px;
    }
    .demo-set > *:last-child {
        float: right;
        margin: 10px;
    }