JSFiddle - React, Tailwind, and code Playground

HTML

<p class="box box-with-left-arrow">
Back
</p>

<p class="box box-with-right-arrow">
back
</p>

<p class="box box-with-bottom-arrow">
Back
</p>

CSS

.box {
    color: yellow;
    background: #000;
    margin: 30px;
    position: relative;
    padding: 1em;
}
.box-with-left-arrow:before {
    content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 20px solid transparent;
	border-right-color: #000;
	left: -40px;
	top: 0;
}

.box-with-right-arrow:before {
    content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 20px solid transparent;
	border-left-color: #000;
	right: -40px;
	top: 0;
}

.box-with-top-arrow:before {
    content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 20px solid transparent;
	border-bottom-color: #000;
	left: 40%;
	top: -40px;
}

.box-with-bottom-arrow:before {
    content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 20px solid transparent;
	border-top-color: #000;
	right: 40%;
	bottom: -40px;
}