HTML <div> </div>上的自定义剪切路径

Question

在使用SVG进行不成功的实验后，我正在寻求使用另一种技术将剪辑路径（自定义多边形，如箭头）应用于<div>，

中的其他HTML元素

<div class="firstbox">
    <h2>Title</h2>
    <a href="#">This is a link</a>
    <img src="#">
</div>

关于<div>之外的背景有问题，它应该是可见的 - 没有png来制作“假面具”。 HTML内容应该在没有JS的情况下可见 - 所以没有<canvas> AFAIK - 并且能够被搜索机器人索引。

以下是想要实现的目标：http://min.us/mboMRhEQSq

Answer 1

嗯，经过一些研究后：

1. clip-path是Mozilla想要并且可能有所帮助的东西，但只有Firefox支持它。
2. mask仅CSS支持CSS属性。
3. 使用HTML内部编写SVG并剪切内容，可以弥补任务，但IE9不会在foreignObject内部呈现HTML。
4. 使用SVG仅剪切背景图像是一种解决方案，但是使用jQuery SVG plugin对内部块进行动画处理（将它们保留在剪辑内）是一项非常艰巨的任务。 SVG的Raphaël JS framework不支持内联SVG。
5. 在内容上使用PNG不会，<div>下方的背景必须可见。
6. 使用<canvas>执行任务是不行的，它不是用于在内部呈现html代码。此外，没有像SVG这样的事件处理程序可以动画“悬停”。

所以，答案很清楚：没有办法剪辑（mak）一组HTML元素。我想回到绘图板。

Answer 2

如果你只有几个短字符串（比如你的例子），我建议你只使用普通的svg，并在svg中使用一个掩码。这将适用于所有支持svg的浏览器。或者您可以等待所有浏览器实现尚未标准化的suggestions之一（建议1-3）。

这是在svg中使用掩码的example。在svg 1.1 testsuite中还有更多内容，请查找名为masking的测试 - *。