有没有办法从CSS中的任何图像创建复杂的多边形形状,以便在regions属性中使用？

Question

我正试图找到一种方法将任何黑色图像转换为多边形.

我试图解决的问题包括两个步骤:

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

我正在努力迈出第一步.由于我没有找到任何"转换器",我唯一的想法是将图像转换为SVG格式(如果它不是SVG),然后获取矢量数据并将其粘贴到CSS内部多边形形状(与Raphaël.js类似).

这是唯一的方法吗？

约束:

• 我不想让大量的div组成一个形状.
• 我不想使用JavaScript来完成这项任务.
• 如果形状很复杂,则必须是多边形.

下面是我正在尝试做的例子(我只对复杂的多边形感兴趣).

我应该使用哪些方法提示？

来自Adobe的图片:http://adobe.github.com/web-platform/samples/css-exclusions/

Answer 1

您可以使用图像进行框遮罩，本文中的详细信息以及此链接中的示例（仅限 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>

结果 ：

** 编辑 **

摩尔关闭前卫技术！

您需要在 chrome 或 chrome canary 部分访问http://html.adobe.com/webplatform/enable/，您会发现一行内容：

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

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

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

这里有龙！！

如果您足够勇敢，激活实验功能，您将体验到图像中强大形状的所有令人敬畏的感觉！哇:)

这里有一支示例笔，只有在激活实验功能时才能工作 => http://codepen.io/anon/pen/yhIbE

如果一切顺利，您可能会在后面的段落中看到鸭子剪影和鸭子，并且所有内容都没有被剪切或剪辑，所有文本都被包裹起来;)

这一切都处于实验阶段，但有一天您将能够在所有浏览器中执行此类操作，因为本文中详细介绍的每个方面都包含在 W3C 草案中。

• 使用数据 uri 和图像塑造内部形状
• 形状 Alpha 通道树桩

干杯!

编辑 ：

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