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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (10)

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

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

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

我在为第一步而奋斗。由于我还没有找到任何“转换器”,我剩下的唯一想法就是将图像转换为SVG格式(如果它已经不是SVG格式),然后获取向量数据并将其粘贴到CSS多边形形状中(类似于Rapha l.js)。

这是唯一的办法吗?

限制条件:

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

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

提问于
用户回答回答于

你可以使用图像进行框掩蔽

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

结果:

扫码关注云+社区