CSS中的曲線菜單

我被設計師給出了一個文件，我需要開發它。他們要求我做一個弧形/拱形菜單：CSS中的曲線菜單

enter image description here

這是可能創造？我以前從來沒有遇到過這樣的事情，並且對於解決這個問題感到困惑。

2012-07-26 joshzee

是將其切片成較小的圖像，而不是使用文本選項？ – 2012-07-26 03:33:24

您也許能canvas做到這一點。有關示例，請參閱Is there a way to curve/arc text using CSS3/Canvas的答案。請注意，IE8和更早版本不支持canvas，但在現代瀏覽器中它受到了相當廣泛的支持。

你也可能想看看這個教程drawing a sine wave with canvas因爲在圖像菜單是形狀有點正弦波。

雖然對於這樣的事情，這是很多工作。相反，您可以將其製作爲大圖像，並使用map元素來製作圖像映射。

您也可以將它構建出一系列小圖像。

2012-07-26 03:35:24 Trott

-1

這根本不可能使用CSS。它必須使用切片圖像創建或在Flash中完成。

2012-07-26 03:34:27 CoreyRS

我認爲儘管很困難，但CSS3甚至IE過濾器都是可行的。至少是文字部分。 – 2012-07-26 03:38:00

我使用wordpress開發網站，所以我猜想切片圖像將不可能，因爲我將使用他們的動態菜單。 – joshzee 2012-07-26 03:42:59

然後我不認爲這是可能的。如果你看一下@特洛特的回答對畫布和正弦繪製波你可以把它去，但它肯定會採取了很多的工作，可能超過它的價值。 – CoreyRS 2012-07-26 04:04:26

你可以看看例子使用CSS3的rotation屬性：

2012-07-26 03:35:05 xandercoded

用wordpress的動態菜單可以做到這一點嗎？如果沒有我有辦法把這個關掉？ – joshzee 2012-07-26 03:44:27

不旋轉菜單字面上旋轉菜單，而不是曲線文字？我不認爲它實際上可以彎曲它，只是旋轉它的軸點。 – CoreyRS 2012-07-26 04:02:38

回答