JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="trans">текст</div>
<div class="fig">текст</div>

CSS

.trans, .fig{
position:relative;    
margin:50px;
width:100px;
padding:10px 0px;
background:#333;
color:#ccc;    
}

.trans:after{
content:'';
position:absolute;
right:-12px;
top:0;
bottom:0;    
width:23px;
background:#333;
-webkit-transform:skewX(-30deg); 
}

.trans:hover, .trans:hover:after{
background:#999;
}

.fig:after{
content:'';
position:absolute;
top:0;
bottom:0;
right:-20px;
width: 0;
height: 0;
border-top: 40px solid #333; 
border-right: 20px solid transparent;    
}

.fig:hover{
background:#999;
}

.fig:hover:after{
border-top-color:#999;
}