JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <li>
        <a href="#">Hello</a>
    </li>
</nav>

CSS

nav li a {
float: left;
height: 23px;
line-height: 24px;
padding: 1px 10px 0 24px;
color: #fff;
background-color: #393233;
text-align: center;
width:75%;
}
nav li a:before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-color: white #393233 white white;
  border-style: solid;
  border-width: 12px 12px 12px 12px;
  }
nav li a:after {
content: "";
float: left;
position: absolute;
top: 0;
right:0px;
width: 0;
height: 0;
border-color: #393233 transparent #393233 #393233;
border-style: solid;
border-width: 12px 12px 12px 12px;
}

nav li  { list-style-type:none; width:200px;
position: relative;
}
nav li a { text-decoration:none;}


nav li:after {
  content: "";
  float: left;
  position: absolute;
  top: 0;

  width: 0;
  height: 0;
  border-color: rgba(255,255,255,0)  rgba(255,255,255,0)  rgba(255,255,255,0) #393233;
  border-style: solid;
  border-width: 12px 12px 12px 12px;
    border-radius: 50%;
    
  }