7

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.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
joshzee
  • 187
  • 1
  • 12

3 Answers3

6

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.

Community
  • 1
  • 1
Trott
  • 66,479
  • 23
  • 173
  • 212
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

Alex
  • 34,899
  • 5
  • 77
  • 90
  • Is it possible to do this with wordpress' dynamic menu? if not i there a way to turn this off? – joshzee Jul 26 '12 at 03:44
  • doesnt rotate menu literally rotate the menu, rather than curve text? i dont think it can actually bend it, just rotate it on an axis point. – CoreyRS Jul 26 '12 at 04:02
-2

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

CoreyRS
  • 2,227
  • 3
  • 26
  • 44
  • I think it's possible with CSS3 and even IE filters, although difficult. At least the text part. – Wesley Murch Jul 26 '12 at 03:38
  • I'm using wordpress to develop the site, so I'm guessing slicing the images won't be possible because I'll using their dynamic menu. – joshzee Jul 26 '12 at 03:42
  • then i don't think it's possible. if you look at @Trott's answer about canvas' and drawing on a sine wave you may be able to get it going but it will definitely take a lot of work, probably more than it's worth. – CoreyRS Jul 26 '12 at 04:04