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

Question

在尝试使用 SVG 失败后，我希望使用另一种技术将 clip-path(自定义多边形，如箭头)应用于 <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只有 Chrome 支持 CSS 属性。
3. 用内部 HTML 编写 SVG 代码并裁剪内容，可以弥补这项任务，但 IE9 不会在 foreignObject 内部呈现 HTML。
4. 使用 SVG 仅剪切背景图像是一个解决方案，但是在 block 内设置动画(以将它们保留在剪裁内)对于 jQuery SVG plugin 来说是一项非常艰巨的任务。 . Raphaël JS framework for SVG 不支持内联 SVG。
5. 在内容上使用 PNG 是行不通的，<div> 下方的背景必须是可见的。
6. 使用 <canvas>因为这个任务是不行的，它不是用来在里面渲染 html 代码的。此外，没有像 SVG 这样的事件处理程序来“悬停”动画。

所以，答案很明确:没有办法剪辑(制作)一组 HTML 元素。我想回到绘图板。