javascript - リンクホバーでカスタム形状の背景を重ねる方法

Question

画像の例:

2 つのリンクがあります: 1と2 2
つの背景グラデーション イメージ: blue-greenとyellow-red。

それらの1つ（1または2）にカーソルを合わせた後、適切な拡張背景を持つ三角形が必要です。

たとえば、1にカーソルを合わせると、青と緑のグラデーションの三角形の始まりが必要になります。2と同じですが、グラデーションの適切な位置です。

Answer 1

純粋な css 形状を機能させるには、境界線の幅でさまざまなあいまいなことを行います。三角形のルールと境界線のグラデーションのルールを組み合わせようとして少し遊んでみましたが、それらを連携させることができませんでした (とにかく Chrome で)。ボーダー画像は、画像を 9 ビット (4 つの角、4 つの端、中央) にスライスすることで機能します。ハードシェイプの境界ルールが依存する透明で角度のあるエッジを常にオーバーライドするようです。

つまり、私はあなたのための解決策を持っていませんが、CSS3 を使用していても、純粋な css ソリューションに関する限り、あなたはおそらく運が悪いでしょう. 探している効果を得るには、おそらく JS または画像のトリックが必要になるでしょう。