有没有办法从CSS中的任何图像创建复杂的多边形形状，以便在regions属性中使用？
我正在尝试找到一种方法来将任何黑色图像转换为多边形形状。
我试图解决的问题包括两个步骤：
- 将图像转换为多边形
填充多边形
我正在努力迈出第一步。由于我还没有找到任何“转换器”，我唯一的想法是将图像转换为SVG格式(如果它还不是SVG格式)，然后获取矢量数据并将其粘贴到CSS多边形形状中(类似于Raphaël.js)。
这是唯一的方法吗？
约束条件：
- 我不想创建成一个形状的大量div。
- 我不想使用JavaScript来完成此任务。
- 如果形状很复杂，则它必须是多边形。
下面是我正在尝试做的例子(我只对复杂的多边形感兴趣)。
关于我应该使用的方法类型，有什么建议吗？
图片取自：
回答 1
Stack Overflow用户
发布于 2014-02-18 21:30:17
您可以使用图片进行框遮罩，详细信息在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>结果：
**编辑**
摩尔接近前卫的技术！
您需要转到http://html.adobe.com/webplatform/enable/，在chrome或chrome金丝雀部分，您将找到一行内容：
启用形状、区域和混合模式的
：
将chrome://flags/#enable-experimental-web-platform-features复制并粘贴到地址栏中，然后按enter键。
- 单击该地址栏中的“Enable”链接，然后单击浏览器窗口底部的“Relaunch”按钮。
注意:重新启动前可以启用多个功能。
龙来了！！
如果你足够勇敢，激活实验功能，你将遭受图像中强大形状的所有惊人之处！哇:)
这里有一支样笔，只有在您激活了=> http://codepen.io/anon/pen/yhIbE的实验功能后才能使用
如果一切顺利，你可能会在后面的段落中看到一只鸭子的剪影和一只鸭子，而且都没有被剪切或裁剪，所有的文本都被包裹了;)
这一切都是实验性的，但总有一天你将能够在所有浏览器中做这样的事情，因为这篇文章中详细介绍的每一个方面都在W3C草案中。
干杯!
编辑：
找到一篇关于这个主题的很好的文章：http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html
https://stackoverflow.com/questions/15001974
复制相似问题