Untitled

dabblet.css

body {
	color: red;
}

i { color: green; }

.caret {
	display: inline-block;
	width: 0;	
	height: 0;
	vertical-align: middle;
	
	border-top: 5px solid;
	border-bottom: 5px solid;
	border-left: 5px solid;
	border-right: 5px solid;
}

.caret-big {
	border-top-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 10px;
	border-right-width: 10px;
}

.caret-left {
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
}

.caret-right {
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-right-color: transparent;
}

.caret-down {
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
}

.caret-up {
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
}

.caret-gray {
	color: #a0a0a0;
}

dabblet.html

<p>Test carets</p>
<i class="caret caret-left"></i>
<i class="caret caret-right"></i>
<i class="caret caret-down"></i>
<i class="caret caret-up"></i>

<i class="caret caret-big caret-left"></i>
<i class="caret caret-big caret-right"></i>
<i class="caret caret-big caret-down"></i>
<i class="caret caret-big caret-up"></i>

<i class="caret caret-big caret-up caret-blue"></i>

<i class="caret caret-big caret-left caret-gray"></i>

settings.json

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