JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="arrow"></div>
</body>

CSS

/**
 * css3 arrow
 */
html { height: 100% }
body {
	height: 100%;
	background: linear-gradient(45deg, #B6D9F8, #FFBEBE);
	}
.arrow {
	width: 350px;
	height: 100px;
	position: relative;
	border: 2px solid #f00;
	border-right: none;
	}
	.arrow:before,
	.arrow:after {
		content: "";
		position: absolute;
		width: 0;
		height: 61%;
		right: -1px;
		border-right: 2px solid #f00;
	}
	.arrow:before {
		top: 0;
		-webkit-transform: rotate(-34deg);
		-moz-transform: rotate(-34deg);
		-o-transform: rotate(-34deg);
		transform: rotate(-34deg);
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-o-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	.arrow:after {
		bottom: 0;
		-webkit-transform: rotate(34deg);
		-moz-transform: rotate(34deg);
		-o-transform: rotate(34deg);
		transform: rotate(34deg);
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}