JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
Текст
</div>

CSS

.test{
  width:200px;
  height:50px;
  background:#ff0;
  border-top:2px solid #f00;
  border-bottom:2px solid #f00;
  position:relative;
  margin:0 auto;
  white-space: nowrap;
  text-align: center;
  font-size:40px;
}
.test:after{
  content:"";
  position:absolute;
  width:36px;
  height:36px;
  border-left:2px solid #f00;
  border-bottom:2px solid #f00;
  top:6px;
  left:-20px;
  transform: rotate(45deg);
  background:#ff0;
  z-index:-1;
}
.test:before{
  content:"";
  position:absolute;
  width:36px;
  height:36px;
  border-top:2px solid #f00;
  border-right:2px solid #f00;
  top:6px;
  left:181px;
  transform: rotate(45deg);
  background:#ff0;
  z-index:-1;
}