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;
	position: relative;
}

.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;
	position: relative;
	left: -2px;
}

.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;
	position: relative;
	top: 2px;
}

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

.caret-left.caret-big { left: -4px}
.caret-up.caret-big { top: -8px}
.caret-down.caret-big { top: 4px;}


.caret-gray {
	color: #a0a0a0;
}

dabblet.html

<p>Test carets</p>
<a href=""><i class="caret caret-left"></i>Test</a>
<a href=""><i class="caret caret-right"></i>Test</a>



<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>


<a href=""><i class="caret caret-big caret-left"></i>Test</a>
<a href=""><i class="caret caret-big caret-right"></i>Test</a>

<a href=""><i class="caret caret-big caret-up"></i>Test</a>
<a href=""><i class="caret caret-big caret-down"></i>Test</a>

settings.json

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