JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#demo" class="arrow_box">Hallo!</a> test

CSS

.arrow_box {
    background      : #0f0;
    border          : 3px solid red;
    border-right    : none;
    box-sizing      : border-box;
    color           : black;
    display         : inline-block;
    font-size       : 14px;
    height          : 42px;
    line-height     : 36px;
    margin          : 20px 20px 0 0;
    padding         : 0 5px 0 20px;
    position        : relative;
    text-decoration : none;
    text-transform  : uppercase;
}

.arrow_box::after {
    border-top    : 2px solid #f00;
    border-bottom : 2px solid #f00;
    content       : "";
    display       : block;
    position      : absolute;
    top           : -2px;
    bottom        : -2px;
    right         : 0;
    width         : 2px;
}

.arrow_box::before {
    background       : linear-gradient(to top left, #0f0 50%, transparent 50%);
    border-right     : 4px solid #f00;
    border-bottom    : 4px solid #f00;
    box-sizing       : border-box;
    content          : "";
    display          : block;
    height           : 42px;
    position         : absolute;
    bottom           : -3px;
    left             : 100%;
    width            : 42px;
    transform        : scaleX(.8) rotate(-45deg) scale(0.7071067);
    transform-origin : bottom left;    
}