JSFiddle - React, Tailwind, and code Playground

HTML

<body style="background:yellow">
<div class="tabStyle">Rectangle</div>
</body>

CSS

.tabStyle{
    border-style:solid;
    border-color: #D8D8D8;
    background : #D8D8D8;
   width:200px;
    height:93px;
    color: #000;   
    position: relative;
    top: 10px;
    left: 49px;
    text-align:center;
}
.tabStyle:hover {
    background : #000;
    border-color: #000;

}
.tabStyle:hover::before{
     border-color: transparent #000 #000  transparent ;
    border-style: solid;
    border-width: 0px 0px 100px 50px;

    
} .tabStyle:hover::after{
    border-color: transparent transparent #000 #000;
    border-style: solid;
    border-width: 0px 50px 100px 0px;
}
.tabStyle::after {
    border-color: transparent transparent #D8D8D8 #D8D8D8;
    border-style: solid;
    border-width: 0px 50px 100px 0px;
    position: absolute;
    top: -4px;
left:101%;
content:"";
}
.tabStyle::before {
    border-color: transparent #D8D8D8 #D8D8D8  transparent ;
    border-style: solid;
    border-width: 0px 0px 100px 50px;
    position: absolute;
    top: -4px;
    right: 101%;   
    content:"";
}