JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li><a>Link</a></li><li><a>Mega link</a></li>
</ul>

CSS

html,body{
    margin:0px;
    background:#eee;
}
.menu{
    margin:10px 5px;
    background:#bbb;
}
.menu>li{
    display:inline-block;
    padding:0px 5px;
    background:#bbb;
    cursor:pointer;
}
.menu>li:hover{
    background:#999;
}
.menu>li>a{
    position:relative;
    display:inline-block;
    padding:5px 10px 10px 10px;
}
.menu>li>a:before{
    content:'';
    position:absolute;
    top:-5px;
    left:-5px;
    width: 50%;
    height: 0;
    border-bottom: 5px solid #bbb; 
    border-right: 5px solid #bbb;
}
.menu>li:hover>a:before{
    border-bottom: 5px solid #999;
    border-right: 5px solid transparent;
}
.menu>li>a:after{
    content:'';
    position:absolute;
    top:-5px;
    right:-5px;
    width: 50%;
    height: 0;
    border-bottom: 5px solid #bbb; 
    border-left: 5px solid #bbb;
}
.menu>li:hover>a:after{
    border-bottom: 5px solid #999;
    border-left: 5px solid transparent;
}