html - 使用 HTML 和 CSS 正确显示等距图 block

Question

我想用 HTML 和 CSS 创建一个简单的等距 map 。

图 block 宽 128 像素，高 64 像素，但其中一些图 block (如下图)包含使它们的总高度为 128 像素的图形元素。

在这个简化的示例中，等距图 block map 只有 2x2 block ，应该如下所示:

如何使用 HTML 和 CSS 正确显示这些图 block ，以便它们具有正确的位置和比例？

请注意，2x2 tilemap 只是一个例子。如果 map 是 5x5 瓦片或 25x75 瓦片，该解决方案也需要同样有效(或差不多)。无论磁贴顺序如何，它也需要正常工作。

到目前为止，我的想法是旋转容器使其等距，然后沿相反方向旋转图 block 以“补偿”容器的旋转(我更喜欢以它们的方式显示图 block 绘制)。但我不确定这是正确的方法。放置不正确，图像失真。

你能告诉我哪里做错了吗？

.container {
  width: 256px;
  height: 256px;
  transform: rotateX(60deg) rotateZ(45deg);
  display: flex;
  flex-wrap: wrap;
  background-color: blue;
}

.tile {
  width: 128px;
  transform: rotateX(0deg) rotateZ(-45deg);
}

.grass {
  height: 64px;
  background-image: url("/image/39MxJ.png");
}

.bush {
  height: 128px;
  background-image: url("/image/GpNEI.png");
}

<div class="container">
  <div class="tile grass"></div>
  <div class="tile grass"></div>
  <div class="tile bush"></div>
  <div class="tile bush"></div>
</div>

Answer 1

使用当前结构，只需更改一些 CSS 属性即可。

我认为没有必要使用“transform”属性，这也可以通过display: grid 属性来实现。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  grid-row: span 2;
  grid-auto-flow: dense;
  width: 258px;
  grid-auto-rows: 32px;
  min-height: 140px;
}

.tile {
  width: 128px;
  height: 87px;
}

.tile:first-child,
.bush:last-child {
  grid-column-start: 1;
  grid-column-end: 3;
  width: 100%;
}

.grass {
  background-image: url("/image/39MxJ.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
}

.bush {
  height: 128px;
  background-image: url("/image/GpNEI.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  margin-top: -52px;
}

<div class="container">
  <div class="tile grass"></div>
   <div class="tile bush"></div>
  <div class="tile grass"></div>
  <div class="tile bush"></div>
</div>

这是关于 Codepen 的工作示例