CSS - Test Your CSS Skills Number 38 - round tabs

PaulOB · May 23, 2011, 9:29pm

CSS - Test Your CSS Skills Number 38 - round tabs: Quiz now finished -See solution in post #13

Hot on the heels of the last quiz I have another task for you to complete. Look at the attachment and you will see a simple tab menu which has normal round corners at the top and inverted round corners at the bottom.

Your task is to create that tab menu.

Figure 1 on the attachment shows the basic square tabbed menu. Figure 2 shows the current tab selected. Figure 3 shows what happens when you hover over a tab.

The top corners are easy now that we have border-radius but how do you create the bottom corners which are facing the other way? You will need some of the techniques we used in the last quiz but that is the only clue I am giving.

I will give you the html and css for the basic square tab menu (although I think I’m being a bit lenient here as I am doing all the donkey work for you :)). You can change the css as much as you want but the html between the body tags must remain untouched.

Here is the starting code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    padding:20px;
    background:#ccc;
}
h2 {
    margin:0;
    padding:10px;
    color:#fff;
}
p {
    margin:0 0 1em;
    color:#fff;
}
.wrap {
    width:760px;
    margin:auto;
}
.tab {
    margin:0;
    padding:0 0 0 10px;
    list-style:none;
    width:750px;
    margin:auto;
}
.tab li {
    float:left;
    margin:0 20px -1px;
    position:relative;
    z-index:1;
}
.tab li a {
    float:left;
    padding:5px 20px;
    background:#000;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #000;
    border-bottom:none;
}
.tab li.current a, .tab li a:hover {
    border-bottom:1px solid red;
    padding:5px 20px 4px;
    background:red;
}
.tabbox {
    clear:both;
    border:1px solid #000;
    width:740px;
    margin:auto;
    background:#f00;
    padding:10px;
}
</style>
</head>
<body>
<div class="wrap">
    <ul class="tab">
        <li class="current"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
    </ul>
    <div class="tabbox">
        <h2>Tab Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    </div>
</div>
</body>
</html>

(Note: Yes I noticed that I have two tabs named “Tab 1” but I was too lazy to go back and take another screenshot .:))

If you are unfamiliar with border-radius you can grab the code easily from the border-radius generator here.

Rules

There are always rules

[B]Must work in IE9+ and modern Safari, Chrome, Firefox and Opera (don’t bother with ie8 and under).

Valid html and css (css2.1 or 3) (but I am also interested in non valid approaches if its interesting).

No scripts of any kind.

No background images or equivalents (data uri etc).

You can use whatever CSS rules you like but the html between the body tags must be untouched.[/B]

You can change the css or even remove the css and start again as you think fit.

I think that covers everything but if anything is still unclear or I have made an error in my logic then just shout. The winner won’t necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).

Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.

Don’t post your answers in this thread but PM with the details instead so that all can have a go.

Have fun.

PS. : In case you missed the other tests you can find them all listed here:

YuriKolovsky · May 24, 2011, 6:35am

Awwww, gotta go to work, will try it out as soon as I get back!

PaulOB · May 24, 2011, 9:41am

Look forward to seeing what you come up with Timo

PicnicTutorials · May 24, 2011, 1:48pm

I’ve got it. I just can’t yet get rid of this one stupid little 1px line. I will keep thinking.

PaulOB · May 24, 2011, 2:09pm

Good work Eric Not quite as straight forward as it looked;)

Hueij · May 24, 2011, 2:37pm

Submission on its way…

PicnicTutorials · May 24, 2011, 3:26pm

Answer submitted. That was a hard. I think I got lucky figuring out that one. The way I did it seems a little clumsy. But it works and was the only way I could think to do it.

PaulOB · May 24, 2011, 3:29pm

Well done Hueij and Eric both your solutions work -well done:)

Both solutions were similar as was my original.

Anyone else care to have a try? (apart for Timo who will no doubt solve this when he finishes work).

YuriKolovsky · May 24, 2011, 7:59pm

Solution sent!

PaulOB · May 24, 2011, 8:10pm

Coming in fast and furious now.

I have a correct solution from Timo (YuriKolovsky) and then 1 minute later a correct answer from Remon (ScallioXTX).

Well done to both of you

I’ll leave the quiz open for a few days as usual to give others who are busy at the moment a chance to have a go before I publish the answers.

ChicagoLimousine · May 25, 2011, 8:33pm

Thats why I love sitepoint forums! As soon as I get better at css, I’ll start solving those puzzles too. (I want to redesign my company website so started learning html, css and php)
Could anyone also suggest css learning website other than w3schools?

YuriKolovsky · May 26, 2011, 4:15pm

For CSS you must learn HTML too, there are plenty of books on CSS on sitepoint Art & science, [URL=“http://www.sitepoint.com/books/cssant3/?historicredirect=cssant1&historicredirect=cssant2”]101, Then there are countless blogs on webdesign which I’ll have trouble recounting just like that… then there is the [URL=“http://www.csszengarden.com/”]zen garden, a [URL=“http://reference.sitepoint.com/css”]CSS/HTML/JS reference co written by the very same Paul that makes these great quizzes, which really helped me with CSS, right after reading the [URL=“http://www.sitepoint.com/books/html2/”]CSS/HTML basics book.

PaulOB · May 28, 2011, 11:36am

Solution Time

Ok this thread is pretty quiet so I’ll announce the solutions now.

Thanks to all that took part and well done as you all solved it.

As this quiz was hot on the heels of the last one it was obvious that you would need some pseudo content to place the extra round corners as required. However, it wasn’t that straight forward because although you could place the corners easily you couldn’t match the background colours.

The trick was to place another pseudo element underneath the corner that held a background colour to match the body. You all sussed this out pretty quickly and the rest was just fine tuning and positioning.

I had correct entries from Hueij, Eric Watson, Yurikolovsky and Remon (ScallioXtx).

Well done to all and the winner this time will be Hueij simply because it was the first entry received and I was fed up with having too many ties

Well done Hueij

Solutions:

This is my original solution which slightly differs to most of the others as I placed the background in one go all the way along the top while others did it on individual elements.

I also ran into an Opera bug when using background-clip as opera let the whole background bleed into the corners when in fact it should have had the opposite effect. (background clip is used on round corners [URL=“http://forrst.com/posts/CSS_Fix_for_Safari_background_bleed_with_round_c-B1x”]to stop the issue shown here.)

(Also note in my solution I have added in the vendor extensions for border-radius in case you want to use it for some older browsers.)

Paul:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    padding:20px;
    background:#ccc;
}
h2 {
    margin:0;
    padding:10px;
    color:#fff;
}
p {
    margin:0 0 1em;
    color:#fff;
}
.wrap {
    width:760px;
    margin:auto;
}
.tab {
    margin:0;
    padding:0 0 0 10px;
    list-style:none;
    width:750px;
    margin:auto;
    position:relative;
    float:left;
}
.tab li {
    float:left;
    margin:0 20px -1px;
    position:relative;
    z-index:1;
}
.tab li a {
    float:left;
    padding:5px 20px;
    background:#000;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #000;
    border-bottom: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;
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding-box;
    /*background-clip:padding-box; buggy in opera 11*/
    position:relative;
    z-index:3;
}
.tab li.current a, .tab li a:hover {
    border-bottom:1px solid red;
    position:relative;
    z-index:3;
    padding:5px 20px 4px;
    background:red;
}
.tabbox {
    clear:both;
    border:1px solid #000;
    width:740px;
    margin:auto;
    background:#f00;
    z-index:99;
    padding:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 5px 4px 4px #0f0d0f;
    -moz-box-shadow: 5px 4px 4px #0f0d0f;
    box-shadow: 5px 4px 4px #0f0d0f;
}
.tab li:before,.tab li:after {
    content:" ";
    display:block;
    position:absolute;
    bottom:0;
    left:-20px;
    width:20px;
    height:20px;
    background:#ccc;
    border:1px solid #000;
    border-top:none;
    border-left:none;
    z-index:100;
}
.tab li:before{
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
}
.tab li:after {
    left:auto;
    right:-20px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    border-left:1px solid #000;
    border-right:none;
}
.tab a:after,.tab a:before {
    content:" ";
    display:block;
    position:absolute;
    z-index:99;
    bottom:0;
    left:-19px;
    width:20px;
    height:20px;
    background:#000;
}
.tab a:before {
    left:auto;
    right:-20px;
}
.tab li.current a:after, .tab li a:hover:after, .tab li.current a:before, .tab li a:hover:before {
    background:red;
    bottom:-1px
}
</style>
</head>
<body>
<div class="wrap">
    <ul class="tab">
        <li class="current"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
    </ul>
    <div class="tabbox">
        <h2>Tab Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    </div>
</div>
</body>
</html>

Hueij:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    padding:20px;
    background:#ccc;
}
h2 {
    margin:0;
    padding:10px;
    color:#fff;
}
p {
    margin:0 0 1em;
    color:#fff;
}
.wrap {
    width:760px;
    margin:auto;
}
.tab {
    margin:0;
    padding:0 0 0 10px;
    list-style:none;
    width:750px;
    margin:auto;
}
.tab li {
    float:left;
    margin:0 20px -1px;
    position:relative;
    z-index:1;
}
.tab li:before, .tab li:after {
    content: "";
    position:absolute;
    width:12px;
    height:12px;
    bottom:0;
    background:#000;
    z-index:2;
}
.tab li.current:before, .tab li.current:after, .tab li:hover:before, .tab li:hover:after {
    background:#FF0000;
}
.tab li:before {
    left:-11px;
}
.tab li:after {
    right:-11px;
}
.tab li a {
    position:relative;
    float:left;
    padding:5px 20px;
    background:#000;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #000;
    border-bottom:none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.tab li a:before, .tab li a:after {
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    bottom:0;
    background:#ccc;
    border-bottom:1px solid #000;
    z-index:3;
}
.tab li.current a:before, .tab li.current a:after, .tab li a:hover:before, .tab li a:hover:after {
    bottom:-1px;
}
.tab li a:before {
    border-right:1px solid #000;
    left:-13px;
    border-bottom-right-radius: 12px;
}
.tab li a:after {
    border-left:1px solid #000;
    right:-13px;
    border-bottom-left-radius: 12px;
}
.tab li.current a, .tab li a:hover {
    border-bottom:1px solid red;
    padding:5px 20px 4px;
    background:red;
}
.tabbox {
    clear:both;
    border:1px solid #000;
    width:740px;
    margin:auto;
    background:#f00;
    padding:10px;
    border-radius: 12px;
    box-shadow:6px 6px 6px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="wrap">
    <ul class="tab">
        <li class="current"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
    </ul>
    <div class="tabbox">
        <h2>Tab Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    </div>
</div>
</body>
</html>

Eric Watson:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    padding:20px;
    background:#ccc;
}
h2 {
    margin:0;
    padding:10px;
    color:#fff;
}
p {
    margin:0 0 1em;
    color:#fff;
}
.wrap {
    width:760px;
    margin:auto;
}
.tab {
    margin:0;
    padding:0 0 0 10px;
    list-style:none;
    width:750px;
    margin:auto;
}
.tab li {
    float:left;
    margin:0 20px -1px;
    position:relative;
    z-index:1;
}
.tab li a {
    float:left;
    padding:5px 20px;
    background:#000;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #000;
    border-bottom:none;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.tab li.current a, .tab li a:hover {
    border-bottom:1px solid red;
    padding:5px 20px 4px;
    background:red;
}
.tabbox {
    clear:both;
    border:1px solid #000;
    width:740px;
    margin:auto;
    background:#f00;
    padding:10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow:5px 5px 5px #111;
    -webkit-box-shadow:5px 5px 5px #111;
    box-shadow:5px 5px 5px #111;
}
.tab li:before {
    content:"";
    position:absolute;
    z-index:2;
    bottom:0;
    left:-10px;
    height:10px;
    width:10px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    -webkit-border-bottom-right-radius:8px;
    -moz-border-radius-bottomright:8px;
    border-bottom-right-radius:8px;
    background:#ccc;
}
.tab a:before {
    content:"";
    position:absolute;
    bottom:0px;
    left:-10px;
    height:10px;
    width:11px;
    background:#000;
    z-index:1;
}
.tab li:after {
    content:"";
    position:absolute;
    z-index:2;
    bottom:0;
    right:-10px;
    height:10px;
    width:10px;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    -webkit-border-bottom-left-radius:8px;
    -moz-border-radius-bottomleft:8px;
    border-bottom-left-radius:8px;
    background:#ccc;
}
.tab a:after {
    content:"";
    position:absolute;
    bottom:0px;
    right:-10px;
    height:10px;
    width:11px;
    background:#000;
    z-index:1;
}
.tab li.current a:after, .tab li.current a:before, .tab li a:hover:before, .tab li a:hover:after {
    background:red;
}
</style>
</head>
<body>
<!-- http://www.visibilityinherit.com/projects/test38.html -->
<div class="wrap">
    <ul class="tab">
        <li class="current"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
    </ul>
    <div class="tabbox">
        <h2>Tab Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    </div>
</div>
</body>
</html>

Yurikolovsky:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    padding:20px;
    background:#ccc;
}
h2 {
    margin:0;
    padding:10px;
    color:#fff;
}
p {
    margin:0 0 1em;
    color:#fff;
}
.wrap {
    width:760px;
    margin:auto;
}
.tab {
    margin:0;
    padding:0 0 0 10px;
    list-style:none;
    width:750px;
    margin:auto;
}
.tab li {
    float:left;
    margin:0 20px -1px;
    position:relative;
    z-index:1;
}
.tab li a {
    float:left;
    padding:5px 20px;
    background:#000;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #000;
    border-bottom:none;
}
.tab li.current a, .tab li a:hover {
    border-bottom:1px solid red;
    padding:5px 20px 4px;
    background:red;
}
.tabbox {
    clear:both;
    border:1px solid #000;
    width:740px;
    margin:auto;
    background:#f00;
    padding:10px;
}
 
/*CSS added by me*/
.tab li a {
    -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;
}
.tab li:before,
.tab li:after,
.tab a:before,
.tab a:after {
    background:#000;
    height:11px;
    width:11px;
    display:block;
    content:"";
    position:absolute;
    bottom:0;
}
.tab .current a:before,
.tab .current a:after,
.tab a:hover:before,
.tab a:hover:after {
    background:red;
}
.tab a:before {
    left:-10px;
}
.tab a:after {
    right:-10px;
}
.tab li:before,
.tab li:after {
    background:#ccc;/*heheheheee*/
    z-index:2;
    border:solid #000 1px;
    border-top:0;
}
.tab li:before {
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    left:-11px;
    border-left:0;
}
.tab li:after {
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    right:-11px;
    border-right:0;
}
</style>
</head>
<body>
<div class="wrap">
    <ul class="tab">
        <li class="current"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
    </ul>
    <div class="tabbox">
        <h2>Tab Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    </div>
</div>
</body>
</html>

Remon:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    padding:20px;
    background:#ccc;
}
h2 {
    margin:0;
    padding:10px;
    color:#fff;
}
p {
    margin:0 0 1em;
    color:#fff;
}
.wrap {
    width:760px;
    margin:auto;
}
.tab {
    margin:0;
    padding:0 0 0 10px;
    list-style:none;
    width:750px;
    margin:auto;
}
.tab li {
    float:left;
    margin:0 20px -1px;
    position:relative;
    z-index:1;
}
.tab li a {
    float:left;
    padding:5px 20px;
    background:#000;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #000;
    border-bottom:none;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
}
.tab li:before,
.tab li:after {
    content: '';
    position: absolute;
    bottom: 0px;
    width: 10px;
    height: 10px;
    background: #ccc;
    border: 1px solid;
    z-index: 2;
}
.tab li:after {
    right: -11px;
    border-color: transparent transparent #000 #000;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}
.tab li:before {
    left: -11px;
    border-color: transparent #000 #000 transparent;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
}
.tab li a:before,
.tab li a:after {
    content: '';
    position: absolute;
    display: block;
    bottom: 0px;
    width: 10px;
    height: 10px;
    background: black;
    z-index: 1;
}
.tab li a:before {
    left: -9px;
}
.tab li a:after {
    right: -9px;
}

.tab li.current a:before,
.tab li.current a:after,
.tab li a:hover:before, 
.tab li a:hover:after {
    background: red;
}

.tab li.current a,
.tab li a:hover {
    border-bottom:1px solid red;
    padding:5px 20px 4px;
    background:red;
}
.tabbox {
    clear:both;
    border:1px solid #000;
    width:740px;
    margin:auto;
    background:#f00;
    padding:10px;
}
</style>
</head>
<body>
<div class="wrap">
    <ul class="tab">
        <li class="current"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
    </ul>
    <div class="tabbox">
        <h2>Tab Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    </div>
</div>
</body>
</html>

Once again thans and congratulations to all those that took part

I’ll let you have a short break before I post another quiz so that you can all recover a bit.

PicnicTutorials · May 28, 2011, 4:48pm

Good job guys! Man I had to take my kids to school which delayed my submit time by 20 minutes. Next one…

YuriKolovsky · May 28, 2011, 6:56pm

you should of got fed up of having ties since the last quiz, then I would have won that one haha

Hueij · May 28, 2011, 11:47pm

So I won because I don’t have kids and it was a slow day at work

But to be honest, not too long ago I read a blogpost about this very problem so I already knew how to solve it: Flared Borders with CSS - Blog - Ordered List

But then again, everything I know about CSS I have read somewhere

PicnicTutorials · May 29, 2011, 1:36am

No no you won because you were faster. That was just my stupid attempt at humor.

PaulOB · May 29, 2011, 9:06am

Wow that’s weird! I thought of this idea quite a while ago on my own and kept it on hold for the quiz and then to see another version in the same month is quite a co-incidence:)

Just shows you that not much is new.

YuriKolovsky · May 29, 2011, 5:49pm

yeah, its impressive that its exactly the same thing in the same month, just shows that you need to be very quick when your online.

BabyWolf · June 7, 2011, 3:07am

Good job guys! I have learned a lot from Site Point. I’m new to this site anyway and have quick question: when is the next round started?

Topic		Replies	Views
CSS cross-browser image tabs - a simple way is needed HTML & CSS	8	886	October 8, 2014
CSS - Test Your CSS Skills Number 37 - Crosshair HTML & CSS css-quiz	52	4285	October 8, 2014
[CSS TABS] Rounded corner on the right hand side doesn't appear? HTML & CSS	2	581	November 17, 2010
Not sure what to call it HTML & CSS	3	619	October 8, 2014
Rounded Corners on Menu HTML & CSS	9	6335	October 8, 2014

CSS - Test Your CSS Skills Number 38 - round tabs

Related topics