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.

[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 funand 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.

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

PaulOB
—
2011-05-24T14:09:55Z —
#5

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

Hueij
—
2011-05-24T14:37:42Z —
#6

Submission on its way...

PicnicTutorials
—
2011-05-24T15:26:27Z —
#7

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
—
2011-05-24T15:29:37Z —
#8

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
—
2011-05-24T19:59:28Z —
#9

Solution sent!

PaulOB
—
2011-05-24T20:10:04Z —
#10

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
—
2011-05-25T20:33:09Z —
#11

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
—
2011-05-26T16:15:11Z —
#12

ChicagoLimousine said:

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?

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](http://www.sitepoint.com/books/cssdesign1/) book.

PaulOB
—
2011-05-28T11:36:03Z —
#13

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.:)

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](http://www.css3.info/preview/background-origin-and-background-clip/).)

(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: