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

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

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

>将图像转换为多边形
>用文字填充多边形

我正在努力的第一步。因为我还没有找到任何“转换器”，我唯一想到的是将图像转换为SVG格式(如果它不是SVG格式)，然后获取矢量数据并粘贴到CSS的右侧多边形(类似于Raphaël.js)。

这是唯一的办法吗？

约束：

>我不想让大量的div将会形成一个形状。
>我不想使用JavaScript来执行此任务。
>如果形状复杂，则必须是多边形。

以下是我要做的事情的例子(我只对复杂的多边形感兴趣)。

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

从Adobe获取的图像：http://adobe.github.com/web-platform/samples/css-exclusions/

解决方法

您可以使用图像进行盒子屏蔽， 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/在铬或铬金丝雀部分你会发现一行说：

To enable Shapes,Regions,and Blend Modes:

• copy and paste chrome://flags/#enable-experimental-web-platform-features into the
  address bar,then press enter.
• Click the ‘Enable’ link within that section.
• Click the ‘relaunch Now’ button at the bottom of the browser window.

Note: Multiple features can be enabled before relaunching.

这里是龙！

如果您有足够的勇气，激活实验功能，您将受到图像中强大的形状的一切重视！哇:)

在这里你有一个示例笔，只有当你激活了实验功能=> 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

原文地址：https://www.jb51.cc/css/218535.html