Fancy header style with CSS3 Triangle

dabblet.css

/**
 * Fancy header style with CSS3 Triangle
 */
 
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	margin: 0 auto;
	position: absolute;
	bottom: -13px;
	left: 50%;
}
.arrow-brown {
	border-top: 13px solid brown;
}

.arrow-red {
	border-top: 13px solid red;
}

.arrow-green {
	border-top: 13px solid #ADCB57;
}
.arrow-title.green-bg {
	background: #ADCB57;
}

.arrow-title.red-bg {
	background: red;
}

.arrow-title.brown-bg {
	background: brown;
}
.arrow-title {
	padding: 5px;
	font-family: Arial, Verdana, sans-serif;
	position: relative;
	font-size: 1em;
	color: white;
}

dabblet.html

<h1 class="arrow-title green-bg">Test title <span class="arrow-down arrow-green">&nbsp;</span></h1>
<br />
<h1 class="arrow-title red-bg">Test title <span class="arrow-down arrow-red"> </span></h1>
<br />
<h1 class="arrow-title brown-bg">Test title <span class="arrow-down arrow-brown"> </span></h1>

dabblet.js

// alert('Hello world!');

settings.json

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