Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ZGKRJZ
<ul>
<li><a href="">search</a></li>
<li><a href="">images</a></li>
<li><a href="">maps</a></li>
<li><a href="">play</a></li>
<li><a href="">youtube</a></li>
<li><a href="">news</a></li>
<li><a href="">mail</a></li>
<li><a href="">a really long one to end with</a></li>
</ul>
/* Initial reference: http://jsfiddle.net/sturobson/Xxxvd/ */
* {
box-sizing: border-box;
}
body {
font-size: 15px;
font-weight: bold;
}
ul {
background: #336fa4;
display: block;
height: 51px;
list-style: none;
padding: 0;
}
li {
position: relative;
float: left;
background: #004b8d;
line-height: 23px;
padding: 14px 3px;
margin-right: 21px;
}
a {
color: #fff;
display: block;
font-size: 15px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
a:before {
color: #fff;
content: "+";
font-weight: 900;
margin-right: 6px;
}
li:before {
content: "";
position: absolute;
background: none;
border-left: 20px solid transparent;
border-right: 0px solid transparent;
border-bottom: 51px solid #004b8d;
left: -20px;
top: 0;
}
li:after {
content: "";
position: absolute;
border-left: 0px solid transparent;
border-right: 20px solid transparent;
border-top: 51px solid #004b8d;
right: -20px;
top: 0;
}
li:hover {
background: #336fa4;
}
li:hover:before {
border-bottom-color: #336fa4;
}
li:hover:after {
border-top-color: #336fa4;
}
li:first-of-type {
padding-left: 20px;
}
li:last-of-type {
padding-right: 20px;
}
li:first-of-type:before,
li:last-of-type:after {
content: none;
}
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.