Skip to content

Instantly share code, notes, and snippets.

@JohnRiv

JohnRiv/super-css-super-challenge.html

Created July 27, 2011 21:53
Show Gist options
  • Save JohnRiv/1110464 to your computer and use it in GitHub Desktop.
Save JohnRiv/1110464 to your computer and use it in GitHub Desktop.
Download ZIP
Super CSS Super Challenge Answer
Raw
super-css-super-challenge.html
<!DOCTYPE html>
<html>
<head>
<!--
A solution for the design at http://jsbin.com/super-css-super-challenge
Using no "active" class (but the middle is always "active" in the display).
I think that's how Chris Coyier presented it, but I may have missed the "active" class
-->
<style type="text/css">
body {
background: #333;
font-family: sans-serif;
font-size: 14px;
line-height: 20px;
padding: 20px;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul {
position: relative;
}
ul:after {
content: "";
display: block;
background: #999;
width: 500px;
height: 200px;
position: absolute;
top: 35px;
left: -20px;
z-index: 0;
}
li {
float: left;
padding: 5px 5px;
position: relative;
margin: 0 -5px;
z-index: 50;
}
li:first-child,
li:last-child{
z-index: 1;
}
a {
background: #999;
padding: 5px 15px;
height: 20px;
display: block;
color: #fff;
text-decoration: none;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
li:first-child a,
li:last-child a {
background: #976A49;
}
li:before {
content:"";
display: block;
width: 10px;
height: 10px;
background: #999;
position: absolute;
top: 25px;
left: -5px;
}
li:first-child:before,
li:last-child:after{
background: #976A49;
}
a:before {
content:"";
display: block;
width: 10px;
height: 10px;
background: #976A49;
position: absolute;
top: 25px;
left: -5px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
a:after {
content:"";
display: block;
width: 10px;
height: 10px;
background: #976A49;
position: absolute;
top: 25px;
right: -5px;
z-index: 100;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
li:first-child a:before,
li:last-child a:after{
background: #333;
}
li:after {
content:"";
display: block;
width: 10px;
height: 10px;
background: #999;
position: absolute;
right: -5px;
top: 25px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment