CSS：用形状创建背景？

Question

我只是想知道是否有可能完全使用CSS创建像下面这样的背景？

或者是他们的任何在线工具，并为我们提供CSS代码？

我不知道这种影响被称为诚实，所以我不知道该怎么称呼它。

这是图片：

任何帮助将不胜感激。

Answer 1

我认为你不能单独在CSS中实现这一点，但是here is an online tool可以让你保存在你的网站中使用的SVG或PNG。如果您想修改代码，可以查看repo on github

Answer 2

理论上，您可以使用其他div填充divs，然后使用transform对其进行转换。然后，您可以在＆＃34;背景＆＃34;之上添加您的实际内容。 div。

一个有解释的工作示例似乎可用here。

然后，这将是非常不切实际的，例如在图像编辑软件中制作背景会容易得多。

Answer 3

好吧，添加JS和Canvas的所有答案，我想补充说你可以在CSS中做到这一点。当然要付出巨大的努力。

使用背景渐变，您可以根据需要创建任意数量的叠加图片。 看这个例子： http://lea.verou.me/css3patterns/#japanese-cube

Answer 4

我不知道确切的图片是否可以使用CSS重现。但是你可以使用CSS3背景渐变创建很多图形模式。

很多例子可以在Lea Verou的博客上找到：http://lea.verou.me/css3patterns/

示例如果是复杂的CSS背景渐变：

＆＃13;

＆＃13;

.pattern {
  width: 40em;
  height: 15em;
  
  background-color:#556;
  background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
  linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
  linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
  linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
  linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
  linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
  background-size:80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

＆＃13;

<div class="pattern"></div>

＆＃13;

＆＃13;

＆＃13;