多角形を繋げるレイアウト

質問

http://guiness.6.ql.bz/sample.jpg

のように多角形同士を繋げたレイアウトをしたいのですがどういった方法をとれば良いのでしょうか？

例の上の画像の水色五角形はボタンと思っていただければと思います。

スタイルシートでは三角形や五角形など、斜めに線を引くことはできないと思うのですが、、、

当方まだ未熟な者で芸達者な方いらっしゃいましたらご伝授いただけませんでしょうか。

回答No.1

naokita · ベストアンサー

まず、そんなレイアウトはしませんが、
１個毎にCSSで作るよりも、１枚に繋げた画像を使うのが現実的でしょう。
ボタンって事はリンクボタン部分を作りたいという質問でしょうか？
HTMLの、map要素 と area要素に　shape="poly" coords="全座標"
を設定すれば可能です。

「クリッカブルマップ」で要検索
------------------------------

それとも、
六角形の画像の作り方の話でしたか？
photoshopの多角形ツールなら一発で出来ますが、
ツールが少ないソフトでも、画像を合体させたり回転させれば出来るでしょう。

お礼

質問内容はnaokitaさんがおっしゃってるリンクボタンの配置についてでした。
座標を指定して配置するという手があったのですか。
クリッカブルマップについて少し調べて勉強してみたいと思います。

六角形の作成自体はヘタクソですがフォトショップでできますが、
を画像のように六角形を繋げまくって蜂の巣のようにリンクボタンを配置していたサイトがあったので（海外だったかな）
かっこいいなあと思っていました。

ありがとうございます。