<div class="arrow"></div>
body {
	background-color: #282828;
}

div.arrow {
	width: 6vmin;
	height: 6vmin;
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: rotate(-45deg);
	
	&::before {
		content: '';
		width: 100%;
		height: 100%;
		border-width: .8vmin .8vmin 0 0;
		border-style: solid;
		border-color: #fafafa;
		transition: .2s ease;
		display: block;
		transform-origin: 100% 0;
	}

	
	&:after {
		content: '';
		float: left;
		position: relative;
		top: -100%;
		width: 100%;
		height: 100%;
		border-width: 0 .8vmin 0 0;
		border-style: solid;
		border-color: #fafafa;
		transform-origin: 100% 0;
		transition:.2s ease;
	}
	
	&:hover::after {
		transform: rotate(45deg);
		border-color: orange;
		height: 120%;
	}
	&:hover::before {
		border-color: orange;
		transform: scale(.8);
		
	}
	
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.