平行四辺形をHTML / CSSにスライスするにはどうすればよいですか？

Question

ウェブサイトのデザインをHTML/CSSにスライスする必要があります。メインナビゲーションメニューは次のようになります。

私は初心者のWeb開発者であり、このデザインを互換性のあるクロスブラウザーコードにスライスする方法がわかりません。これらの平行四辺形のアイテムをどのようにスライスする必要がありますか？

ホバー状態と選択状態もあるため、おそらくCSSスプライトを使用しますが、主な問題はこれらの平行四辺形です。

Answer 1

Css transformをいじりたくない場合。

正直なところ、長方形を使用し、ロールオーバー状態が長方形を越えないようにすることが最善です。例： http://imm.io/J4D8

役立つ場合はこれも見つけました http://doctype.com/rollover-done-css

Answer 2

古いブラウザではサポートされていませんが、CSSのtransformプロパティを見ることができます。 http://davidwalsh.name/css-transform-rotate それは非常に厄介ですが、背景画像を使用してその上にテキストを配置することをお勧めします）投稿したURLに表示される効果を達成するため

Answer 3

CSSプロパティを持つ平行四辺形 を作成できますが、IEでは正方形として表示されます。

また、shape="poly"とポイントの座標を利用するいくつかのエリアタグで、古き良き imagemap を使用できる場合があります。それがロールオーバーで機能するかどうかはわかりません。