Arrow

dabblet.css

/**
 * Arrow
 */
body{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}

div{
	width: 200px;
	top:200px;
}
.arrow_box {
	position: relative;
	background: #88b7d5;
}
.arrow_box:after, .arrow_box:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-left-color: #88b7d5;
	border-width: 30px;
	margin-top: -30px;
}

dabblet.html

<div class="arrow_box"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}