"New" sashes

dabblet.css

/**
 * "New" sashes
 */

body {background: url(https://a1.lscdn.net/imgs/9150ea6b-2d69-4dce-ba12-6838c560909f/original_q60.jpg) no-repeat center center fixed; background-size: cover; font-family: Arial Rounded MT Bold; -webkit-font-smoothing: antialiased; font-size: 14px;}
.nav ul {width: 220px;}
.nav li {background: #262626; display: block; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(0,0,0,.5);}

.nav li a {display: block; color: #fff; padding: 10px; text-decoration: none; padding-left: 40px; position: relative;}
.nav li:first-child {border-radius: 4px 4px 0 0;}
.nav li:last-child {border-radius: 0 0 4px 4px;}

/* The good parts */

.nav li a .sash {
	content: attr(data-sash);
	display: inline-block;
	padding: 3px 8px 2px 8px;
	font-size: 10px;
	position: absolute; right: 10px; bottom: 8px;
	border-radius: 2px;
	text-shadow: 0 1px 0 rgba(0,0,0,.3);
	transition: .2s all ease;
	box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 0 rgba(0,0,0,.3);
}

.nav li a .sash:before {
	content: ""; 
	display: block;
	position: absolute; left: -8px; top: 4px;
	border-color: transparent;
	border-right-color: inherit;
	border-style: solid;
	border-width: 4px;
}

.nav li a:hover .sash {right: 5px;}

.sash.products {background: #c77539; border-color: #c77539;}
.sash.events {background: #50886b; border-color: #50886b;}
.sash.adventures {background: #e9ba26; border-color: #e9ba26;}

dabblet.html

<div class="nav">
<ul>
	<li><a href="#" data-sash="new!">home</a></li>
	<li><a href="#" data-sash="old!">products <span class="sash products">new!</span></a></li>
	<li><a href="#">live events <span class="sash events">old!</span></a></li>
	<li><a href="#" data-sash="new!">adventures <span class="sash adventures">broken!</span></a></li>
</ul>
</div>

settings.json

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