有没有办法从 CSS 中的任何图像创建复杂的多边形形状以用于区域属性？

Question

我正在尝试找到一种将任何黑色图像转换为多边形形状的方法。

我要解决的问题包括两个步骤：

1. 将图像转换为多边形
2. 用文本填充多边形

我正在努力迈出第一步。因为我还没有找到任何“转换器”，所以我剩下的唯一想法是将图像转换为 SVG 格式（如果它还不是 SVG），然后获取矢量数据并将其粘贴到 CSS 中多边形形状（类似于 Raphaël.js）。

这是唯一的方法吗？

约束：

• 我不想制作大量的 div 来组成一个形状。
• 我不想在这个任务中使用 JavaScript。
• 如果形状很复杂，它必须是多边形。

以下是我正在尝试做的示例（我只对复杂的多边形感兴趣）。

关于我应该使用的方法类型的任何提示？

图片取自 Adob​​e：http://adobe.github.com/web-platform/samples/css-exclusions/

Answer 1

您可以使用图像进行框屏蔽，this article 中的详细信息和此 link 中的示例（仅限 webkit 示例）

<style type="text/css">
.wrap {
  height:400px;
  width:800px;
  -webkit-mask-box-image:url('silhouette.png');
}
</style>
<div class="wrap">Large lipsum here...</div>

结果：

** 编辑 **

Moar 接近前卫的技术人员！！

您需要转到 chrome 或 chrome canary 部分中的http://html.adobe.com/webplatform/enable/，您会发现一行显示：

启用形状、区域和混合模式：

• 复制并粘贴 chrome://flags/#enable-experimental-web-platform-features 到 地址栏，然后按回车键。
• 点击该部分中的“启用”链接。
• 点击浏览器窗口底部的“立即重新启动”按钮。

注意：在重新启动之前可以启用多个功能。

这里有龙！！

如果你足够勇敢，激活实验功能，你将遭受来自图像的强大形状的所有可怕！哇:)

这里有一个示例笔，只有在您激活实验功能后才能使用 => http://codepen.io/anon/pen/yhIbE

如果一切顺利，您可能会在后面的段落中看到鸭子的剪影和鸭子，而且它们都没有被剪切或剪切，它所有的文本都被包装了;)

这一切都是实验性的，但有一天你将能够在所有浏览器中做这样的事情，因为这篇文章中详述的每个方面都在 W3C 草案中。

• Shape inside with data uris and images
• Shape alpha channel treeshold

干杯！

编辑：

找到一篇关于这个主题的好文章：http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html