主页 / 问题 / 616533
Accepted
VaskM
Asked:2020-01-19 01:56:43 +0000 UTC2020-01-19 01:56:43 +0000 UTC

如何用 div 平铺空间（块）？

  • 772

需要.diamond-parent用积木铺设空间.diamond。或者，您可以制作一个 png 图像并将其与背景平铺，但通过 CSS 解决方案很有趣。

.diamond-parent {
  width: 300px;
  height: 300px;
  background: lightpink;
}

.diamond {
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-bottom-color: red;
  position: relative;
  top: -30px;
}

.diamond:after {
  content: '';
  position: absolute;
  left: -30px;
  top: 30px;
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-top-color: red;
}
<div class="diamond-parent">
  <div class="diamond"></div>
  <div class="diamond"></div>
</div>

css

2 个回答

  1. Best Answer

    您可以使用两个渐变来做到这一点：

    body {
  background-color: lightpink;
  background-image: linear-gradient(45deg, red 25%, transparent 0, transparent 75%, red 0), 
    linear-gradient(-45deg, red 25%, transparent 0, transparent 75%, red 0);
  /* указываем размеры "ячейки" */
  background-size:60px 60px;
}

    小记：

    我使用0两个渐变步长以避免重复之前的值，因为根据规范，渐变步长不能小于之前的值。

    如果色标的位置小于列表中它之前任何色标的指定位置，则将其位置设置为等于它之前任何色标的最大指定位置。

    • 1

  2. 他们谈论过png，但svg没有人谈论 =)))

    body{
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'><rect transform='rotate(45)' y='-5.6126599' x='5.6126599' height='11.22532' width='11.22532' id='rect3598' style='fill:#ff0000;'/></svg>")  repeat lightpink;
  height: 400px;

}

    • 0

相关问题