CSS中的曲线菜单

Question

7

设计师给了我一个文件，要求我进行开发。他们要求我做一个弯曲/拱形菜单：

enter image description here

这个能够实现吗？我之前从未遇到过这样的情况，对如何解决感到困惑。

- joshzee

2

切成小图像而不使用文本是一个选项吗？ - John Stimac

3个回答

2

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

注意：本文中的HTML标签已保留，但已被翻译。

- Alex

能否使用WordPress的动态菜单来实现这个功能？如果不能，是否有关闭它的方法？ - joshzee

菜单不会真正旋转，而是旋转菜单，而不是弯曲文本？我认为它实际上不能弯曲它，只能围绕轴点旋转。 - CoreyRS

-2

这是无法使用 CSS 实现的。必须使用切片图像或 Flash 来创建。

- CoreyRS

我认为使用CSS3甚至IE滤镜是可能的，尽管有些困难。至少文本部分可以实现。 - Wesley Murch

我正在使用WordPress来开发网站，所以我猜测切割图像可能不可行，因为我将使用他们的动态菜单。 - joshzee

如果你看一下@Trott有关画布和绘制正弦波的答案，也许你可以让它运行起来，但我认为这是不可能的。这肯定需要大量的工作，可能超出了它的价值。 - CoreyRS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trott · Accepted Answer

您可以使用canvas来完成。请参考CSS3 / Canvas是否有一种曲线/弧形文本的方法中的答案示例。请注意，canvas在IE8及更早版本上不受支持，但在现代浏览器中得到了普遍支持。

您也可以查看使用canvas绘制正弦波的教程，因为您图片中的菜单具有类似正弦波的形状。

然而，对于这样的事情，这是非常多的工作量。相反，您可以制作一个大图像，并使用map元素创建一个图像映射。

您也可以通过一系列小图像构建它。