三角形のJPG、PNG、SVGの作り方

Question

三角形の画像を作成したいです。
現在IllustratorでPNG形式で作っていたのですが、透明の部分がwebサイトで認識されてしまいます。

この様な感じで見た目は、良いのですがHTMLでaタグ内で使うと四角形として認識されてしまいます。

Chromeの検証画面だとスクショが取れなくて汚ない画像で申し訳ありません。

画像の通りで、目に見える所は三角形なのですが、HTMLでは四角形になってしまっているためこれを改善したいです。
aタグをこの画像の中にもってきた場合、タップする範囲が三角形ではなくなってしまいます。

Illustratorでアートボードをオブジェクトに合わせるなど色々試してみたのですが、三角形の場合はオブジェクトに合わせるを
しても四角形になってしまいます。
Photoshopでも他のツールでも構いませんがどなたか、三角形をJPG,PNG,SVG,GIFの形式で作れる方法を教えていただけないでしょうか？

Answer 1

aタグをこの画像の中にもってきた場合、タップする範囲が三角形ではなくなってしまいます。

<area>要素でイメージマップを作成しましょう。

三角形をJPG,PNG,SVG,GIFの形式で作れる方法を教えていただけないでしょうか？

SVGであればHTML上に直接描くことで三角形の領域を作れるかもしれませんが、それ以外の画像は常に長方形です。

Comments

[hirokuro900]

<area>要素たるものが存在していたんですね！
貴重のお知恵をお貸しいただき感謝しています。

SVGか<area>要素で頑張ってみます！
ありがとうございましたm(_ _)m

Answer 2

昔はhtml側でクリッカブルマップというのがありましたが、今どうなんでしょうね?
調べてみると面白そうですが。
http://park16.wakwak.com/~html-css/map/map1.html