Angled Navigation?

dabblet.css

/**
 * Angled Navigation?
 * to help @Chrisedmo
 */

nav li {
	list-style: none;
	float: left;
}

nav a {
	font-family: Verdana, sans-serif;
	position: relative;
	display: block;
	padding: 2em 2em 1em;
	color: #fff;
	text-decoration: none;	
}

nav a:before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	transform: skewX(45deg);
	background: blue;
	border: 0 solid black;
	border-width: 0 3px;
}


nav a:hover:before {
	background: transparent;
}

nav a:hover {color: #000;}

dabblet.html

<nav>
	<ul>
		<li><a href="#" title="Link 1">Home</a></li>
		<li><a href="#" title="Link 2">Archives</a></li>
		<li><a href="#" title="Link 3">Portfolio</a></li>
		<li><a href="#" title="Link 4">Downloads</a></li>
		<li><a href="#" title="Link 5">Links</a></li> 
	</ul>
</nav>

settings.json

{"view":"split","prefixfree":"1","page":"css"}