2012-07-26 9 views
7

Ich habe eine Datei von einem Designer erhalten, den ich entwickeln muss. Sie fragen mich ein gekrümmtes/wölbt Menü zu tun:Gekrümmtes Menü in CSS

enter image description here

Ist das möglich zu schaffen? Ich bin noch nie auf so etwas gestoßen und bin verwirrt darüber.

+2

Schneiden Sie es in kleinere Bilder anstelle von Text eine Option? –

Antwort

6

Möglicherweise können Sie es mit canvas zu tun. Siehe die Antwort auf Is there a way to curve/arc text using CSS3/Canvas für eine Probe. Beachten Sie, dass canvas nicht von IE8 und früher unterstützt wird, aber ansonsten in modernen Browsern weitgehend unterstützt wird.

Sie können auch dieses Tutorial auf drawing a sine wave with canvas betrachten, da das Menü in Ihrem Bild etwas sinusförmig ist.

Das ist jedoch eine Menge Arbeit für so etwas. Stattdessen können Sie einfach ein großes Bild erstellen und ein map Element verwenden, um eine Imagemap zu erstellen.

Sie könnten es auch aus einer Reihe kleiner Bilder konstruieren.

-1

Dies ist mit CSS überhaupt nicht möglich. Es müsste mit geschnittenen Bildern oder in Flash erstellt werden.

+0

Ich denke, es ist möglich mit CSS3 und sogar IE-Filter, obwohl schwierig. Zumindest der Textteil. –

+0

Ich benutze WordPress, um die Seite zu entwickeln, also denke ich, dass das Schneiden der Bilder nicht möglich ist, weil ich ihr dynamisches Menü verwenden werde. – joshzee

+0

dann glaube ich nicht, dass es möglich ist. Wenn Sie sich @ Trotts Antwort über Canvas ansehen und eine Sinuskurve zeichnen, können Sie es vielleicht in Gang setzen, aber es wird definitiv eine Menge Arbeit erfordern, wahrscheinlich mehr als es wert ist. – CoreyRS

2
+0

Ist dies mit dem dynamischen Menü von Wordpress möglich? wenn nicht, ich einen Weg, um das auszuschalten? – joshzee

+0

nicht rotieren Menü buchstäblich drehen das Menü, anstatt Kurve Text? Ich denke nicht, dass es es tatsächlich biegen kann, drehen Sie es einfach auf einem Achsenpunkt. – CoreyRS