JSFiddle - React, Tailwind, and code Playground

by Jan

HTML

<div class="wrap">

<div class="vc-arrow-left"></div>

</div>

CSS

body {
	background: url(http://www.conti.co.uk/images/jpg/box-2.jpg);
	background-size: cover;
}

.wrap {
	width: 500px;
	height: 200px;
	display: block;
	position: relative;
	background: #c00;
}

.vc-arrow-left {
	width: 20px;
	height: 200px;
	right: 0;
	background: none;
	position: absolute;
	display: block;
}

.vc-arrow-left:before,
.vc-arrow-left:after {
  	content: '';
  	position: absolute;
  	box-sizing: border-box;
	/*background: #000;*/
  	top: 50%;
  	right: 0;
	margin-top: -10px;
  	border-top: 10px solid transparent;
  	border-bottom: 10px solid transparent;
	border-right: 10px solid green;
}