JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

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

<div class="triangle-new">This is the Text</div>

CSS

.triangle-left {
    width: 0; 
    height: 0; 
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 22px solid gray;
    position:relative;
}
.triangle-left:after{
    content:'';
    width: 0; 
    height: 0; 
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-bottom: 21px solid #fff;  
    position:absolute;
    top:1px;
    left:-21px;
}

.triangle-new:after{  
    width: 200px;
    height: 50px;
    background-color: gray;
    content:url('https://via.placeholder.com/10');
    position:relative;
    /* The points are: centered top, left bottom, right bottom */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}