JSFiddle - React, Tailwind, and code Playground

by antixrist

HTML

<a href="#" class="btn">Hello!</a>

CSS

.btn {
    position: relative;
    display: inline-block;
    height: 50px; width:50%;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
    padding-bottom:15%;
    background-clip:content-box;
    overflow:hidden;
}
.btn:after {
    content: "";
    position: absolute;
    top:50px; left: 0;
    background-color:inherit;
    padding-bottom:50%; width:57.7%;
    z-index:-1;
    
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    
    -webkit-transform: rotate(-30deg) skewX(30deg);;
    -ms-transform: rotate(-30deg) skewX(30deg);
    transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body{background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size:cover;}