DOM要素って普通は長方形の形をしていますが、ピカチュウみたいな複雑な形を作ることはできますか?
その領域だけクリック可能にしたりマウスオーバーを検出したいです。
多分Unityとか使ってブラウザゲームとして作ればできると思うんですが、可能な限り基本技術のみでやりたいです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
ベストアンサー
SVGのpolygonやpathでやるとよいでしょう
sample
HTML
1<svg xmlns="http://www.w3.org/2000/svg" width="150" height="220"> 2<style> 3path:hover{ 4fill:blue; 5} 6</style> 7<g> 8<a href="sample.html" target="_parent"> 9<path fill="yellow" stroke="black" 10d="m 130.77976,81.55357 11c 3.8318,-9.752971 9.26586, 12-18.874334 16.01819, 13-26.887402 7.56868, 14-8.98185 16.79348, 15-16.563628 27.0711, 16-22.2495 -0.83529, 1714.267981 -5.26565, 1828.311423 -12.76912, 1940.475754 -3.2652, 205.293409 -7.10169, 2110.234159 -11.42136, 2214.708768 5.97097, 233.977577 10.78871, 249.665316 13.72989, 2516.20925 3.54606, 267.88976 4.31599, 2716.99495 2.14511, 2825.36813 -2.25773, 297.49577 -6.29734, 3014.44839 -11.69126, 3120.12197 -5.71161, 326.00775 -12.93448, 3310.56742 -20.81469, 3413.13994 9.44218, 359.77624 17.10458, 3621.26621 22.50084, 3733.74059 5.60778, 3812.96336 8.76282, 3926.98277 9.24916, 4041.09869 L 53.672619, 41234.25595 c 0.0748, 42-15.8535 3.993342, 43-31.67543 11.326075, 44-45.73139 5.224922, 45-10.01554 12.163745, 46-19.13418 20.423925, 47-26.84004 -6.079785, 48-6.51117 -11.330649, 49-13.79551 -15.585953, 50-21.62185 -1.864585, 51-3.42934 -3.554256, 52-7.00753 -4.325729, 53-10.834 -0.706575, 54-3.50458 -0.618084, 55-7.16707 0.25692, 56-10.63343 0.860252, 57-2.74068 1.720366, 58-5.4814 2.580341, 59-8.22216 1.293528, 60-4.12251 2.641919, 61-8.3508 5.345532, 62-11.721072 3.178383, 63-3.962117 8.162373, 64-6.414478 13.240794, 65-6.515103 C 80.875322, 6686.113569 75.537654, 6779.365052 71.071859, 6872.081428 64.597759, 6961.522299 59.967413, 7049.836144 57.452381, 7137.708333 c 12.12121, 724.348931 23.264907, 7311.398926 32.386557, 7420.489165 7.21677, 757.191919 13.169872, 7615.648389 17.506302, 7724.867978 z" 78transform="translate(-27.970238,-27.214286)" /> 79</a> 80</g> 81</svg>
※著作権に引っ駆らない程度の適当な絵にしてあります(一部更新あり)
投稿2021/07/28 05:55
編集2021/07/28 07:31総合スコア116724
0
clip-path プロパティ、 mask-image プロパティ、SVG <path>
要素などで可能です。
投稿2021/07/28 05:43
編集2021/07/28 05:44総合スコア21695
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
投稿2021/07/28 05:34
総合スコア36960
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。