Questions page selected element

dabblet.css

/**
 * Questions page selected element
 */

body {
	background-color: lightgray;
}

.arrow_box {
	padding: 40px;
	width: 290px;
	height: 420px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}


.arrow_box {
	position: relative;
	background: #A1579D;
	border: 4px solid #fff;
	border-right: 3px solid #fff;
}
.arrow_box:after, .arrow_box:before {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-left-color: #A1579D;
	border-width: 250px; /* value = computed height of .arrow_box - border / 2 */
	top: 30px;
	margin-top: -30px;
}
.arrow_box:before {
	border-left-color: red;
	border-left-color: #fff;
	border-width: 254px; /* value = :after width + 4 */
	top: 32px;
	left: 100%;
	margin-left: 3px;
	margin-top: -36px;
}

dabblet.html

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

settings.json

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