JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
  position: relative;
  width: 100px;
  height: 50px;
  border-width: 3px 3px 0 3px;
  border-color: #f00 #f00 transparent #f00;
  border-style: solid;
  background: linear-gradient(to right, #f00 0, #f00 40px, transparent 41px, transparent 59px, #f00 60px, #f00 100%) no-repeat bottom center / 100% 3px;
}

div:after {
  content: "";
  position: absolute;
  display: block;
  bottom:-9px;
  left: 41px;
  width: 14px;
  height: 14px;
  transform: rotate(-45deg);
  border-bottom: 3px solid #f00;
  border-left: 3px solid #f00;
}