CODEWITHSUNDEEP
htmlcss
joshzee
joshzee

Reputation: 187

Curved Menu in CSS

I have been given a file by a designer that I'm required to develop. They're asking me to do a curved/arching menu:

enter image description here

Is this possible to create? I've never come across something like this before and am baffled as to approach this.

Upvotes: 7

Views: 2386

Answers (3)

Trott
Trott

Reputation: 70133

You might be able to do it with canvas. See the answer to Is there a way to curve / arc text using CSS3 / Canvas for a sample. Note that canvas is not supported by IE8 and earlier, but it is otherwise pretty widely supported in modern browsers.

You might also want to look at this tutorial on drawing a sine wave with canvas since the menu in your image is somewhat sine wave shaped.

That's a lot of work though for something like this, though. Instead, you can just make it a big image and use a map element to make an image map.

You could also consturct it out of a series of small images.

Upvotes: 6

Alex
Alex

Reputation: 35407

You can look into examples using CSS3's rotation property:

https://www.google.com/search?q=css+rotate

https://www.google.com/search?q=css+rotate+menu

http://snook.ca/archives/html_and_css/css-text-rotation

Upvotes: 2

CoreyRS
CoreyRS

Reputation: 2267

This isn't possible using CSS at all. It would have to be created using sliced images or done in flash.

Upvotes: -2

Related Questions