JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<div class="arrow-wrap">
<a href="#" class="arrow-button">Back to top
    <span class="arrow-tip-container">
        <span class="arrow-tip">
            <span class="arrow-tip-grad"></span>
        </span>
    </span>
</a>
</div>

CSS

.arrow-wrap{ width:125px; margin:auto; padding:100px 0;}
.arrow-button {
    width: 125px;
    height: 50px;
    line-height: 50px;
    position: relative;
    background: #f00;
    text-align: center; text-decoration:none; color:#000; display:block;
    color:#fff;
}
.arrow-tip {
    display: block;
    width: 101px;
    height: 115px;
    margin: 0;
    -webkit-transform: rotate(45deg) skew(-18deg,-23deg);
}
.arrow-tip-container {
    display: block;
    width: 125px;
    height: 40px;
    position: absolute;
    top: -40px;
    left: 0px;
    overflow: hidden;
}
.arrow-tip-grad {
    display: block;
    width: 100%;
    height: 100%;
    background: red;
}