Tag labels

dabblet.css

/* Tag labels */

a {
color: #fff;
text-decoration: none;
font-family: sans-serif;
}
.tag {
background: #BA925E;
padding: .5em 1em .5em .5em;
line-height: 1em;
display: inline-block;
position: relative;
margin-left: 1.5em;
border-radius: 0 .5em .5em 0;
}
.tag:before {
	position: absolute;
	top: 0;
	left: -1em;
	content: "";            
    display: block;
    width: 0;
    height: 0;    
    *line-height: 0;
    border-left:none;
    border-top: 1em solid transparent;
    border-right: 1em solid #BA925E;
    border-bottom: 1em solid transparent;
}

.tag:after {
	position: absolute;
	top: 50%;
	left: -0.2em;
	content: "";            
	margin-top: -0.2em;
    display: block;
    width: .4em;
    height: .4em;    
	background: #fff;
	border-radius: 50%;
}

dabblet.html

<a href="#" class="tag">web</a>
<a href="#" class="tag">development</a>

settings.json

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