Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
"A quick example of how to create slanted navigation that uses CSS3 transforms.
#main-nav > ul { overflow: hidden; margin-top: 50px; }
#main-nav > ul > li { float: left; overflow: hidden; padding: 20px; font-size: 18px; margin-left: -35px; }
#main-nav > ul > li:first-child { margin-left: 0px; border-radius: 10px; }
#main-nav > ul > li > a { color: #444; text-decoration: none; overflow: hidden; display: block; -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -webkit-transform: rotate(20deg); background: #bbb; margin-bottom: -100px; margin-top: -70px; height: 150px; border-left: 1px solid white; }
#main-nav > ul > li:first-child > a { border-radius: 10px; border-left: 0; }
#main-nav > ul > li > a > span { overflow: hidden; display: block; -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); padding: 0 20px; margin-top: 57px; }
#main-nav > ul > li > a:hover { background: #aaa; }
#main-nav > ul > li.current > a { background: #000; color: #fff; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.