JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">text</a>

CSS

a{
  text-decoration: none;
  color: #000;
  padding: 20px;
  background: #f00;
  position: relative;
  margin: 40px;
  display: inline-block;
}
a:before,
a:after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  border-top: 29px solid  transparent;
  border-bottom: 29px solid  transparent;
}
a:before{
  left: -20px;
  border-right: 20px solid  #f00;
}
a:after{
  right: -20px;
  border-left: 20px solid  #f00;
}