JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.triangle { 
         position: relative;
         margin-top: 100px;
         width: 20px;
     }
     .triangle>div { 
         width: 20px;
         height: 2px;
         background: red;
     }

     .triangle>div:before {
         content: " ";
         display: block;
         width: 20px;
         height: 2px;
         background: red;
         -webkit-transform: rotate(56deg);
         -moz-transform: rotate(56deg);
         -ms-transform: rotate(56deg);
         transform: rotate(56deg);
         position: absolute;
         top: -8px;
         right: -5px;
     }
     .triangle>div:after {
         content: " ";
         display: block;
         width: 20px;
         height: 2px;
         background: red;
         -webkit-transform: rotate(-56deg);
         -moz-transform: rotate(-56deg);
         -ms-transform: rotate(-56deg);
         transform: rotate(-56deg);
         position: absolute;
         top: -8px;
         left: -5px;
     }