JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"> <a class="nav-item">START</a>
 <a class="nav-item">GRUPPEN</a>
 <a class="nav-item">HILFE</a>

</div>

CSS

#header {
    margin-top:2em;
}
.nav-item {
    width: 120px;
    display:inline-block;
    position:relative;
    font-family:arial, helvetica;
    text-align:center;
    height:3em;
    line-height:3em;
    margin:0 1.5em;
    cursor:pointer;
}
.nav-item:before, .nav-item:after {
    content:"";
    width:0;
    height:0;
    border:1.5em solid transparent;
    position:absolute;
    top:0;
}
.nav-item:before {
    right:100%;
}
.nav-item:after {
    left:100%;
}
.nav-item:hover {
    background:black;
    color:white;
}
.nav-item:hover:before {
    border-right-color:black;
    border-top-color:black;
}
.nav-item:hover:after {
    border-left-color:black;
    border-bottom-color:black;
}