Skip to content

Instantly share code, notes, and snippets.

@royvandam

royvandam/index.html

Created April 16, 2015 15:27
Show Gist options
  • Save royvandam/606d50dea1b9d8de336c to your computer and use it in GitHub Desktop.
Save royvandam/606d50dea1b9d8de336c to your computer and use it in GitHub Desktop.
Download ZIP
css3 skewed menu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>skew menu</title>
</head>
<body>
<nav>
<ul>
<li class="leader"><span>&nbsp;</span></li>
<li><span>20-21 APR</span></li>
<li class="link"><span><a href="#">INFO</a></span></li>
</ul>
</nav>
</body>
</html>
Raw
style.css
body {
background: #333 url('http://www.bikewalls.com/pictures/Honda_CBR1000_RR_2012_01_1024x768.jpg') fixed center center;
background-size: cover;
}
nav ul {
list-style:none;
}
nav li {
display:inline-block;
text-align:center;
background-color: #fff;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
-ms-transition: background 0.2s;
-o-transition: background 0.2s;
transition: background 0.2s;
}
nav li span {
display:block;
padding: 4px 10px;
color:#000;
font-family: sans-serif;
font-size:14px;
font-weight: bold;
font-variant: small-caps;
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-ms-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
nav li.leader span {
padding: 4px 0px;
}
nav li.link {
background: black;
}
nav li.link:hover {
background: red;
}
nav li.link span a {
text-decoration:none;
color: white;
}
nav li.link:hover span a {
color:#fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment