Curved CSS Menu

Question

I have been provided with the file by the designer, which I must develop. They ask me to make a curved / bend menu:

Is it possible to create? I had never encountered anything like this before, and I was confused to get closer to this.

Answer 1

You might be able to do this with canvas . See Answer to Is there a way for curve / arc text using CSS3 / Canvas for a sample. Please note that canvas not supported by IE8 before, but in modern browsers it is pretty widely supported.

You can also look at this tutorial on drawing a sine wave using canvas , since the menus in your image are somewhat sinusoidal in waveform.

It works a lot, although for something like this. Instead, you can simply make it a large image and use the map element to create an image map.

You can also install it from a series of small images.

Answer 2

You can see examples using the CSS3 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 is not possible with CSS. It must be created using cropped images or executed in flash memory.