CSS中的曲线菜单

Question

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:

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

Answer 1

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.

Answer 2

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

Answer 3

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