Coding a curvy menu buttons

[fxck]

Hey guys, I’m having a little problem, our designer recklessly designed a little awkward menu(http://i.imgur.com/f5MGB.png), now the client insists on coding it like this.

So I’m trying to find the best way to do it, ideally the whole button should be click-able/hover-able(that’s the main problem, since the button actually ends in the first third of the next one) and gotta be flexible(not fixed width), how would you approach it? I want to use the least shizzle wizzle(areas, excessive use of images etc) as possible..

Thanks!

[Paulie_D]

I’m guess you might be able to play with this: https://css-tricks.com/better-tabs-with-round-out-borders/ but It might take some time and browser support (IE) would not be super-deep.

[Watson90]

It definitely is possible to do but I’d be freakin’ at the designer, who obviously knows little about front-end development, just because something looks good on paper doesn’t mean it can be done efficiently on the web.

[JoniGiuro]

I don’t think there’s a safe and quick way to do it without javascript/flash or image maps..
You’ll always end up clicking the wrong element when the pointer is in between two tabs

[Author]

Posts