JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="arrow_box"></div>
    <div class="arrow_box2"></div>
</div>

CSS

#container {
    position: absolute;
    top: 100px; 
    left: 100px;
    background: #3b2a32;
    border: 2px solid #ad1b59;
    height: 205px; 
    width: 203px;
    
}

.arrow_box {
	position: relative;
	background: none;
	border: 2px solid transparent;
    width: 200px
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(59, 42, 50, 0);
	border-top-color: #3b2a32;
	border-width: 103px;
	left: 50%;
	margin-left: -100px;
}
.arrow_box:before {
	border-color: rgba(173, 27, 89, 0);
	border-top-color: #ad1b59;
	border-width: 103px;
	left: 50%;
	margin-left: -103px;
}

.arrow_box2 {
	position: absolute;
	background: none;
	border: 2px solid transparent;
    width: 200px;
    top: 204px;
    left: 1px;
}
.arrow_box2:after, .arrow_box2:before {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box2:after {
	border-color: rgba(59, 42, 50, 0);
	border-bottom-color: #3b2a32;
	border-width: 103px;
	left: 50%;
	margin-left: -106px;
}
.arrow_box2:before {
	border-color: rgba(173, 27, 89, 0);
	border-bottom-color: #ad1b59;
	border-width: 103px;
	left: 50%;
	margin-left: -103px;
}