Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created January 25, 2012 15:49
Show Gist options
  • Save LeaVerou/1676877 to your computer and use it in GitHub Desktop.
Save LeaVerou/1676877 to your computer and use it in GitHub Desktop.
Angled Navigation?
/**
* Angled Navigation?
* to help @Chrisedmo
*/
nav li {
list-style: none;
float: left;
}
nav a {
position: relative;
display: block;
padding: 2em 2em 1em;
color: black;
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>
<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>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment