JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.arrow_box::after {
	border: 2px solid transparent;
	border-top-color: #F00;
	border-right-color: #F00;
	content: " ";
	display: block;
	height: 26px;
	position: absolute;
	right: -15px;
	top: 3px;
	transform: rotate(45deg);
	width: 26px;
}