most flexible arrow

dabblet.css

/**
 * most flexible arrow
 */

.out {
	width: 100px;
	height: 200px;
	position: relative;
	overflow: hidden;
	/*
	background: gray;
	*/
}

.out::before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    
    width: 141.42%; height: 70.71%;
	transform: rotate(-45deg) translateY(29%);
	border: 1px solid #333;
	
	/*
	background: red;
	*/
}

dabblet.html

<div class="out"></div>

dabblet.js

// alert('Hello world!');

settings.json

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