html - 重なり合う要素を透明な背景とボックスの影で融合

Question

私は 2 つの要素を並べて融合させようとしています - それらが 1 つの要素であるかのように - 通常はそれらを少しオーバーラップさせ、1 つの要素のように簡単に見えるようにしますが、使用している両方の要素の背景は部分的に透明ですオーバーラップがおかしく見えます - 残りの背景よりも暗くなり、ボックスの影が非常にはっきりと見えます

http://jsfiddle.net/vbh4u/7/

要素を完全に並べてみましたが、まだ少しの影が表示されています。ボックスの影のスプレッド値に負の値も使用しましたが、要素の一部しか必要ないため、これは理想的ではありません片面全体ではなく、片面の半分のように、影を持たないように...

少し調べてみましたが、何も見つかりません。誰かアイデアがありますか？

編集：

canvas 要素についてはほとんど知りませんが、canvas を使用してこのようなことを行う方法はありますか?たとえば、キャンバスに複雑な形状を描画し、それをコンテンツの下に配置する方法はありますか?

Answer 1

これが私の試みです：http://jsfiddle.net/Simo990/YxRWp/4/

負のマージンとトップ シャドウを削除しただけです。それはあなたが望むものではありませんが、... 気に入っていただければ幸いです。

Answer 2

このようなもの？

http://jsfiddle.net/vbh4u/9/