html - 融合具有透明背景和框阴影的重叠元素

Question

我试图让两个元素排成一行并融合在一起——就好像它们是一个元素一样——通常我会将它们重叠一点，它们很容易看起来像一个元素，但我使用的两个元素都有一个部分透明的背景，所以重叠看起来很有趣——它会比其余的背景更暗，你会非常清楚地看到盒子的阴影

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

我已尝试将我的元素完美排列，但你仍然会看到一些阴影出现——我还在盒子阴影上使用负数作为传播值，但这并不理想，因为我只需要一部分元素的一部分没有阴影，如一侧的一半，而不是一侧的所有......

我一直在四处寻找，但找不到任何东西，有人有想法吗？

编辑:

我对 canvas 元素知之甚少，但是有没有一种方法可以使用 canvas 来做这样的事情，比如在 cavas 上绘制一个复杂的形状并将其放在内容下面？

Answer 1

这是我的尝试:http://jsfiddle.net/Simo990/YxRWp/4/

刚刚删除了负边距和顶部阴影。这不是您想要的，但是...希望您喜欢。