html - 在 html 中渲染带有阴影的气泡状缩略图的灵活方法

目标:带有阴影的类似语音气泡的缩略图，就像这个:

大小和阴影可能会发生变化。

我的第一个想法当然是 png 叠加层，但它缺乏灵 active 而且也不好玩。但是，它总是有可能作为旧 ie-s 的后备。

还考虑过用旋转的 div 渲染“尾部”，但在其中匹配背景将是一个皮塔饼。

什么是更好的方法？ Canvas 或者 svg 蒙版？几乎没有经验。有了这些技术，我们将不胜感激一些入门技巧。

更新:好吧，这就是我在浏览文档和浏览器不一致几个小时后想到的 svg:

似乎不可能通过 css 将阴影的剪切路径和 svg 过滤器应用于 html 元素，因此我们必须在 <svg> 中呈现整个故事。 .
我发现了两种将图像嵌入到 svg 中的方法:1) 使用 feImage 进行拟合元素 2) foreignObject与 img或 div有背景。

第一种方法可以看例如像这样

<svg filter="url(#dropshadow)"> <rect x="0" y="0" width="120" height="120" filter="url(#imageFilter)" clip-path="url(#clipPath)"/> </svg>

这将在 FF 和 Chrome 中工作(我没能在 Opera 中工作并且没有尝试 ie9)。然而，使用这种方法，FF 中的图像似乎变得模糊，至少在调整大小后是这样，而在 Chrome 中，它看起来比原始图像更亮(原文如此!)。

仅从研究的 Angular 来看，需要为每张图像创建一个单独的过滤器才使其变得有趣。

第二种方法看起来像这样

<svg filter="url(#dropshadow)"> <foreignObject width="140" height="140" clip-path="url(#clipPath)"> <img src="img/ourImage.png" height="140" /> </foreignObject> </svg>

它在 FF 中完美运行，但 Chrome 和 Opera 都不能将剪切路径应用于 foreignObject (没试过ie9)。
似乎只有 FF 支持 clippingPath 内的多个元素:如果您添加多个矩形，Chrome 和 Opera 会输出一些奇怪的东西。所以为了在 Chrome 中使用第一种方法，我必须创建一个 path在 InkScape 中，而在 FF 中，我设法创建了带有两个矩形的“气泡”，一大一小并旋转了。

因此，第二种方法看起来很不错，它比较灵活且易于使用。如果除 FF 之外的其他浏览器能更好地支持剪切路径就好了……

以下是 jsFiddle 示例:http://jsfiddle.net/B7593/11/演示了两个变体，其中剪切路径由 2 个矩形组合而成，因此仅适用于 FF，http://jsfiddle.net/B7593/10/使用由 InkScape 生成的路径元素并在 Chrome 中部分工作。

UPDATE2:好吧，我真丢人，还有第三种也是最合适的将图像嵌入 svg 的方法:image element .

最佳答案

如果你想把它做成 svg，我会这样做:

然后重复使用基本设置，只替换头像 url。使用 Inkscape 或 Illustrator 制作快速原型(prototype)应该相当简单。

更新: 这是一个 example我的意思。

关于html - 在 html 中渲染带有阴影的气泡状缩略图的灵活方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7435596/