most flexible arrow

dabblet.css

/**
 * most flexible arrow
 */

.arrow {
	width: 100px;
	height: 200px;
	position: relative;
	overflow: hidden;
	border-color: red;
}

.arrow:hover {
	border-color: green;
}

.arrow::before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -100%;
    
    width: 141.42%; height: 70.71%;
	transform: rotate(-45deg) translateY(29%);
	border: 5px solid #333;
	box-sizing: border-box;
	
	border-color: inherit;
	
	/*
	background: red;
	*/
}

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}