JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<br />
<div class="container">
   <center>Test Container</center>
    
</div>
<br>
</br>
<div class='container'>
     <div class='before'></div> 
     <div class='after'></div>
</div>

CSS

.container {
        margin-left: 15px;
        width: 100px;
        position: relative;
        border: solid transparent;
        border-color: transparent transparent black transparent;
        border-style: solid;
        border-width: 1px;
    }
    .container:after,after {
        content:'';
        display: block;
        position: absolute;
        left: 50%;
        top: 100%;
        width: 0;
        height: 0;
        border-color: white transparent transparent transparent;
        border-style: solid;
        border-width: 7px;
        margin-left: -7px;
        
    }
    .container:before,before {
        content:'';
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0;
        height: 0;
        border-color: black transparent transparent transparent;
        border-style: solid;
        border-width: 8px;
        margin-left: -8px;
      
    }