ベストな方法は、対話型の非矩形のHTML要素

Question

を作成する

ユーザーは、三角形のいずれかのセクションの上に置いたときに、私がして、写真に示すような私のHTMLページの一つに背景を作成したいですその特定のセクションの不透明度が変化します。それをする最善の方法は何ですか？

Answer 1

SVGでは、ポリゴン要素を使用して四角形内に三角形を作成し、各ポリゴンを別々にホバリングすることができます。

.square { 
 
    height: 400px; 
 
    width: 400px; 
 
    overflow: hidden; 
 
} 
 
svg { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
polygon { 
 
    fill: aliceblue; 
 
    stroke: crimson; 
 
    stroke-linejoin: round; 
 
} 
 
polygon:hover { 
 
    fill: cornflowerblue; 
 
}

<div class='square'> 
 
    <svg viewBox='0 0 100 100'> 
 
    <a xlink:href='http://google.com'> 
 
     <polygon points='5,5 50,50 95,5' /> 
 
    </a> 
 
    <polygon points='5,5 50,50 5,95' /> 
 
    <polygon points='5,95 50,50 95,95' /> 
 
    <polygon points='95,5 50,50 95,95' /> 
 
    </svg> 
 
</div>

Answer 2

私はあなたが背景としてたいセクション/ Sを作成/描画するには、Adobe Illustratorのを使用します。それをSVGファイルに保存します。

SVGファイルをブラウザで開き、HTMLファイル内のすべてのタグをコピーします。 そしてJS、Jquery、ライブラリを使って、あなたが望むことをする。

例？

これは私の家です。www.triiio.it