JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="arrow arrow--right"></div>

<div class="arrow arrow--top_right"></div>

<div class="arrow arrow--bottom_right"></div>

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

<div class="arrow arrow--top_left"></div>

<div class="arrow arrow--bottom_left"></div>

<div class="arrow arrow--top"></div>

<div class="arrow arrow--bottom"></div>

CSS

body {
	padding: 100px;
}

.arrow,
.arrow:before,
.arrow:after {
	background-color: rgba(0,0,0,0.5);
	border-radius: 2px;
}

.arrow {
	position: relative;
	margin-bottom: 7em;
}

.arrow:before,
.arrow:after {
	content: "";
	position: absolute;
}



/* top and bottom */

.arrow--bottom,
.arrow--top {
	height: 74px;
	width: 4px;
}

.arrow--top {
	transform: rotateZ(180deg)
}

.arrow--bottom:before,
.arrow--bottom:after,
.arrow--top:before,
.arrow--top:after{
	width: 19px;
	height: 4px;
	top: 100%;
}


.arrow--top:before,
.arrow--bottom:before {
    right: 50%;
		transform-origin: right bottom;
    transform: rotateZ(45deg); 
}

.arrow--top:after,
.arrow--bottom:after {
    left: 50%;
    transform: rotateZ(-45deg);
    transform-origin: left bottom;
}




/* left right and others */
.arrow--left,
.arrow--right,
.arrow--top_left,
.arrow--top_right,
.arrow--bottom_left,
.arrow--bottom_right {
	height: 4px;
	width: 74px;
}


.arrow--left {
	transform: rotateZ(180deg)
}

.arrow--top_left {
	transform: rotate(-135deg);
}

.arrow--top_right {
	transform: rotate(-45deg);
}

.arrow--bottom_left {
	transform: rotate(135deg);
}

.arrow--bottom_right {
	transform: rotate(45deg);
}


.arrow--left:before,
.arrow--left:after,
.arrow--right:before,
.arrow--right:after,
.arrow--top_right:before,
.arrow--top_right:after,
.arrow--bottom_right:before,
.arrow--bottom_right:after,
.arrow--top_left:before,
.arrow--top_left:after,
.arrow--bottom_left:before,
.arrow--bottom_left:after {
	height: 19px;
	width: 4px;
	    left: 100%;
}

.arrow--right:before,
.arrow--top_right:before,
.arrow--bottom_right:before,
.arrow--left:before,
.arrow--top_left:before,
.arrow--bottom_left:before {
    top: 50%;
		transform-origin: right top;
    transform: rotateZ(45deg); 
}


.arrow--right:after,
.arrow--top_right:after,
.arrow--bottom_right:after,
.arrow--left:after,
.arrow--top_left:after,
.arrow--bottom_left:after {
	bottom: 50%;
	transform-origin: right bottom;
	transform: rotateZ(-45deg); 
}