カスタムシェイプに移動します。の仕方？

三角形の枠内でのみホバーイベントを発生させるCSS三角形（たとえば）を作成するにはどうすればよいですか？カスタムシェイプに移動します。の仕方？

実際には、ゲーム上の場所とその上のさまざまなオブジェクトが表示されます。マウスを置くとぼやけます。

このdemoでは、span:hoverのスタイルは、三角形ではなく要素の四角形の境界線を入力するときにトリガすることに注意してください。

出典

2013-05-07 Alexander Mironenko

divで三角形を作成しますか？ – PraJen

私はあなたが要素でそれを行うことはできないと思うし、おそらく 'キャンバス'を使わなければならないでしょう。 –

'map'と' area'というタグがあります。 http://www.w3schools.com/tags/tag_area.aspまた、三角形を描くこともできます。 –

SVG polygonで図形を作成しようとすると、:hoverは「真」の領域を尊重します。

注これはカスタムシェイプのための純粋なCSS + SVGソリューションです。そして、カスタム、それは純粋なCSSを使用して作成されていない形状が、SVG ...

<svg width="120" height="120" 
    viewPort="0 0 120 120" version="1.1" 
    xmlns="http://www.w3.org/2000/svg"> 
    <polygon points="60,0 0,120 120,120" id="shape"/> 
</svg>

非常にシンプルなCSS HTML

の

少し！

#shape:hover{fill:red;}

ここにはworking fiddleがあります。

ブラウザのサポート： This questionブラウザのサポートに若干の光を送ります。容認された答えはありませんが、SVGをサポートしていないブラウザには非常に便利なリンクや選択肢があります。

出典

2013-05-07 08:29:30 Arkana

カスタムシェイプに移動します。の仕方？

答えて

関連する問題