JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div id="a">
     Contact
    <br>Hello
    <br>Hi
</div>
<br>
 <div id="a">
     This
    <br>div
    <br>has
    <br>a
    <br>lot
    <br>of
    <br>rows
    <br>.
    <br>.
    <br>.
</div>

CSS

#a {
    position: relative;
    width: 120px;
    padding: 10px 20px;
    font-size: 20px;
    position: relative;
    
    color: #2E8DEF;
    background: #333333;
    border-bottom: 3px solid #2E8DEF;
}
#a:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    
    background: #333333;
    border-bottom: 3px solid #2E8DEF;
    border-right: 20px solid #2E8DEF;
    
    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}