JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<body>
<div id="arrowbox"></div>
</body>

CSS

#arrowbox
{
    width: 200px;
    height: 50px;
    background-color:green;
    margin-left:100px;
    margin-top:100px;
    position: relative;
}

#arrowbox:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 128, 0, 0);
	border-left-color: #008000;
	border-width: 25px;
	margin-top: -25px;
}

#arrowbox:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 128, 0, 0);
	border-right-color: #008000;
	border-width: 25px;
	margin-top: -25px;
}