JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu">
<a>текст</a><a>текст</a><a>текст</a>
<div class="menu-bottom"></div>
</div>
CSS
.menu{
position:relative;
border-bottom:1px solid #bbb;
margin-bottom:5px;
}
.menu>a{
display:inline-block;
position:relative;
padding:10px;
border-right:1px solid #bbb;
cursor:pointer;
}
.menu>a:after{
content:'';
position:absolute;
left:1px;
bottom:-5px;
right:-3px;
height:5px;
border-left:1px solid #bbb;
border-right:1px solid #bbb;
-moz-transform:skewX(45deg);
-ms-transform:skewX(45deg);
-webkit-transform:skewX(45deg);
-o-transform:skewX(45deg);
transform:skewX(45deg);
}
.menu>a:first-child{
margin-left:100px;
border-left:1px solid #bbb;
}
.menu-bottom{
position:absolute;
bottom:-5px;
width:100%;
height:5px;
border-bottom:1px solid #bbb;
}