JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<div >
    <div class="testClass">HOME</div>
    <div class="testClass">ABOUT US</div>
    <div class="testClass">CONTACT</div>
    <div class="testClass">LOGIN</div>
    <div class="testClass">SERVICES</div>
</div>

CSS

div {
    float:left;   
    background-color:#fff; 
    margin: 20px;
  
}
.testClass {
    margin-top: 0px;
    margin-left: 0px;
    padding: 5px 10px;
    display: block;
    background-repeat: no-repeat;
    background: #fff;
    position: relative;

}
.testClass:hover {
    background: beige;

}
.testClass:hover:before {
    content: '';
    position: absolute;
    top:0;
    left:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 15px;
    border-color: transparent transparent beige transparent;

}
.testClass:hover:after {
    content: '';
    position: absolute;
    top:0;
    right:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 30px 15px 0 0;
    border-color: beige transparent transparent transparent;

}