How to acheive this effect (Rounded Corners & Drop Down Menu)

Question

I am trying to find out how I can replicate this effect as seen on Aviary

score 2 · Answer 1 · answered Jan 07 '11 at 14:10

2

I think the only way to do this is to use an image; my site uses images. It may be possible with CSS3, but the markup would be horrid!

James

answered Jan 07 '11 at 14:10

Bojangles

score 2 · Accepted Answer · edited May 23 '17 at 10:30

2

Don't listen to the image lovers, I've solved this very problem with no images or extra markup on two occasions:

This about "Discover creations" as if it were a rounded green button.

edited May 23 '17 at 10:30

Community

answered Jan 08 '11 at 22:09

methodofaction

score 0 · Answer 3 · answered Jan 07 '11 at 14:12

0

This will give you a starter for 10. The rounded corner is probably an image.

answered Jan 07 '11 at 14:12

diagonalbatman

I was looking at that tut, except they use a straight line/connection without rounded corners at the join – Jiew Meng Jan 07 '11 at 14:20
Indeed they do - but if you use a bit of absolutely positioned CSS within the drop down div, you should be able to align a curved image over that. – diagonalbatman Jan 07 '11 at 14:25

score 0 · Answer 4 · answered Jan 07 '11 at 14:12

0

A messier way to do it would be to use rounded corners so the green part has rounded corners and is positioned over the gray part.

answered Jan 07 '11 at 14:12

sjobe

score 0 · Answer 5 · answered Jan 07 '11 at 14:14

0

Here are 25 different ways of making rounded corners. Pick one. :) http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

(It's not actually 25 techniques, but links to 25 different sites that explain how to do it.)

answered Jan 07 '11 at 14:14

Lennart Regebro

score 0 · Answer 6 · answered Jan 07 '11 at 14:38

0

You can do it pretty quick and easy with javascript if you have just a few of them.

answered Jan 07 '11 at 14:38

BenE

6 Answers6