CSS中的曲线菜单

Question

我被设计师给了一个我需要开发的文件。他们要我做弯曲/拱形菜单：

这可以创造吗？我以前从未遇到过这样的事情，并且对于接近这个问题感到困惑。

Answer 1

您可以使用canvas执行此操作。有关示例，请参阅Is there a way to curve / arc text using CSS3 / Canvas的答案。请注意，IE8及更早版本不支持canvas，但现代浏览器广泛支持它。

您可能还想在drawing a sine wave with canvas上查看本教程，因为图片中的菜单有点正弦波形。

但是，对于类似的事情，这是很多工作。相反，您可以将其设为大图像并使用map元素制作图像映射。

你也可以用一系列小图片来构建它。

Answer 2

您可以使用CSS3的rotation属性查看示例：

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

根本不可能使用CSS。它必须使用切片图像创建或在闪存中完成。