JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Who We Are & Our Values</a></li>
    <li><a href="#">Our History</a></li>
    <li><a href="#">Our Leadership</a></li>
</ul>

CSS

li {
    float: left;
    background: #00a8b4;
    margin-right: 45px;
}
li > a {
    text-decoration: none;
    display: block;
    position: relative;
    line-height: 40px;
    padding: 0 8px;
    color: #fff;
}
li > a:before {
    content: '';
    position: absolute;
    border: 20px solid #00a8b4;
    border-left-color: transparent;
    border-top-color: transparent;
    right: 100%;
    top: 0;
}
li > a:after {
    content: '';
    position: absolute;
    border: 20px solid #00a8b4;
    border-right-color: transparent;
    border-bottom-color: transparent;
    left: 100%;
    top: 0;
}
li:first-child > a {
    background: #00a8b4;
}
li:first-child > a:after {
    border-top-color: #00a8b4;
    border-left-color: #00a8b4;
}

li:last-child > a {
    background: #00a8b4;
}
li:last-child > a:before{
    border-right-color: #00a8b4;
    border-bottom-color: #00a8b4;
}
li:last-child > a:after {
    border: 0;
}