JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.arrow_box:after, .arrow_box:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {	
	border-left-color: white;
	border-width: 18px;
	margin-top: -18px;
}
.arrow_box:before {	
	border-left-color: #f00;
	border-width: 21px;
	margin-top: -21px;
}