Slanted nav-menu items

dabblet.css

/**
 * Slanted nav-menu items
 */
* { font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
body { 
	background-color: rgba(0,0,0,0.03); 
}

.nav-menu {
	background: #eee;
	color: #999;
	list-style-type: none;
	font-size: 1.5em;
	text-align: center;
	border-bottom: 1px solid #FFF;
	border-bottom: 1px solid #CCC;
	overflow: hidden;/* clearing floats */
	margin: 1em 0;
}
.nav-menu li {
	display: inline-block;
	margin: -1.5em 0.2em; /* Dunno why, but 0.2em makes background line up nicely ;) */
	line-height: 1;
	transform: rotate(30deg); /* Rotation Callibration™ */
	border-left: 1px solid rgba(255,255,255,0.7);
	box-shadow: -1px 0 0 rgba(0,0,0,0.3); /* Extra Ridge Effect™ */
}
.nav-menu li:last-child { border-right: 1px solid rgba(0,0,0,0.3); }

.nav-menu a {
	display: block;
	padding: 2em 1em 2em;
	transform: rotate(-30deg); /* .. And rotate A back.. */

	color: #999;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.nav-menu li.active,
.nav-menu li:hover { background-color: rgba(0,0,0,0.1); }

.nav-menu .active a,
.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu a:active { color: rgba(255,255,255,1); text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }

dabblet.html

<ul class="nav-menu">
	<li class="active"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>

settings.json

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