Untitled

dabblet.css

body {
	background: #CCC;
}

.tags {
	position: relative;
	top: 100px;
	left: 100px;
	width: 300px;
	height: 200px;
	background: #FFF;
	border-radius: 3px;
	border: 0px solid #BFBFBF;
	box-shadow: 0px 1px 6px #AAA;
	overflow: hidden;
	
	background: #EEE;
}

.slider {
	position: relative;
	top: 50px;
	
	width: 100%;
	height: 100px;
	border: 0px solid #FAFAFA;
	border-left-width: 0;
	border-right-width: 0;
	
	box-shadow: 0 0px 5px #CCC;
}

.tail2 {
	position: absolute;
	margin: 0;
	padding: 0;
	top: -0.8em;

	height: 1em;
	line-height: 1em;
	font-size: 1em;
		
	color: #FFF;
	text-shadow: #CCC 0px -2px 2px;
	
	left: 15px;
}

.content {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
}

.inner {
	font: 10pt Arial;
	color: #666;
	padding: 0.5em;
}

dabblet.html

<div class="tags">
	<div class="slider">
		<div class="tail"></div>
		<div class="tail2">▲</div>
		<div class="content">
			<div class="inner">
				This is an arrow without image / transforms: text-shadow only.
			</div>
		</div>	
	</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}