Pure CSS indicator

dabblet.css

/*
Pure CSS indicator
*/
.counter {
	display:table;
	width:52px;
	height:48px;
	position:relative;
	border-radius:3px;
}
.counter.red {
	background-color:#E74C3C;
	border-bottom:solid 4px #C0392B;
}
.counter.red:after{
	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #E74C3C;
}
.label {
	font-size:36px;
	color:#fff;
	font-family:Helvetica;
	font-weight:bolder;
	text-align:center;
	display:table-cell;
	vertical-align:
	middle;
	margin: auto;
}
.counter:after {
	content: "";
	border-style: solid;
	border-width: 9px 9px 9px 9px;
	height: 0;
	position: absolute;
	left: 52px;
	top: 16px;
	width: 0;
	-webkit-transform: rotate(360deg);
}

body { padding: 100px; }

dabblet.html

<div class="notification">
	<div class="counter red">
		<span class="label">1</span>
	</div>
</div>

settings.json

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