JSFiddle - React, Tailwind, and code Playground

by QW01_01

HTML

<ul class="menu">
    <li><span>Блок35131</span></li>
    <li><span>Блок3351</span></li>
    <li><span>Блок351353</span></li>
</ul>

CSS

.menu{
    font-size:20px;
    font-family:Arial,sang-serif;
    margin-top:100px;
}
.menu li{
    background-color:blue;
    color:white;
    display:inline-block;
    width:150px;
    height:50px;
    transition:0.3s;
    transform:translateZ(1px);
}

.menu span{
    display:block;
    width:150px;
    height:50px;
    text-align:center;
    line-height:50px;
}
    
.menu li:hover{
    transform: translateY(10px);
}

.menu li:before{
    content:"";
    width:150px;
    height:40px;
    position:absolute;
    margin-top:-40px;
    margin-left:20px;
    transform: skew(-45deg,0deg);
    background-color:red;
}

.menu li:after{
    content:"";
    width:40px;
    height:50px;
    position:absolute;
    margin-top:-70px;
    margin-left:150px;
    transform: skew(0deg,-45deg);
    background-color:green;
    z-index:-1;
}