JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span class="b-right">link</span>
  <span class="b-left">link</span>
</div>

CSS

div{
  background:#222;
}
span{
  position:relative;
  display:inline-block;
  margin:2px 2px 3px 2px;
  padding:10px 20px;
  border-bottom:4px solid #bbb;
  outline:3px solid #777;
  overflow:hidden;
  background:#777;
  vertical-align:top;
}
span:before, span:after{
  position:absolute;
  display:inline-block;
  content:'';
  width:0;
  height:0;
}
.b-right:before{
  bottom:0;
  right:-10px;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:20px solid #bbb;
}
.b-right:after{
  bottom:-10px;
  right:0;
	border-top:10px solid transparent;
	border-right:20px solid #bbb;
	border-bottom:10px solid transparent;
}
.b-left:before{
  bottom:0;
  left:-10px;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:20px solid #bbb;
}
.b-left:after{
  bottom:-10px;
  left:0;
	border-top:10px solid transparent;
	border-left:20px solid #bbb;
	border-bottom:10px solid transparent;
}