JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line"></div>

CSS

.line {
  position:relative;
  width:200px;
  height:6px;
  background:red;
  margin:100px;
}

.line:before,
.line:after {
  position:absolute;
  content:'';
  width:0;
  height:0;
  border:3px solid transparent;
  top:0;
}

.line:before { 
  left:-50px; 
  border-right:50px solid red;
}
.line:after { 
  right:-50px; 
  border-left:50px solid red; 
 }