JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
<span><a>Home</a></span>
<span><a>About Us</a></span>
<span><a>Contact</a></span>
<span><a>Advantages</a></span>
<span><a>Frequently answered questions</a></span>
  <div class="menu-bg"></div>
</div>

CSS

body{
  background-image: url(https://img1.goodfon.ru/wallpaper/big/b/4e/gorilla-zhivotnoe-obezyana.jpg);
  background-size: cover;
  background-repeat: no-repeat ;
  background-attachment: fixed;
}

.menu {
    padding-right: 0;
    position: relative;
    overflow: hidden;
    display: inline-block;
}
span {
    position: relative;
    padding: 20px;
    display: inline-block;
    text-align: center;
}
span a:before, span a:after {
    background-color: #fff;
    position: absolute;
    top: 45px;
}
span a:before {
    content: "";
    right: 55%;
    bottom: 100%;
    height: 10px;
    z-index: -1;
    position: absolute;
    left: -5px;
    width: 50%;
    background-color: #fff;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);
}
span a:after {
    content: '';
    bottom: 100%;
    height: 10px;
    z-index: -1;
    position: absolute;
    right: -5px;
    width: 52%;
    background-color: #fff;
    -webkit-transform: skew(40deg);
    -moz-transform: skew(40deg);
    -o-transform: skew(40deg);
    -ms-transform: skew(40deg);
    transform: skew(40deg);
}
span:first-child {
  font-size: 24px;
}
.menu-bg {
    position: absolute;
    width: 100%;
    height: 80%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: -1;
}