html - 具有边界折叠替代方案的砖墙

Question

我想要砖墙图案的容器，见图。边框应折叠为 1px(仅适用于表格)。 Tiles 应该在交互过程中改变边框颜色。我正在寻找最干净的解决方案。我尝试过的事情:

• 单个表格:对齐列，破坏积木式布局。

• 每行作为单独的表格:仅允许行内的边框折叠。

• 带背景颜色的 1 像素边距:不会与 float 或内联 block div 折叠。 (我读到 margin-collapse 仅适用于垂直空间。)

我最好的解决方案(未图示):每一行都是单独的表格，带有折叠边框，边框围绕半个单元格(不是首选)，删除所有单元格的顶部边框，在顶行顶部添加边框。容器中的容器具有 1px 透明边框，当瓷砖突出显示时变为红色。我失去了这个边界的空间。我选择透明而不是 0px 来保持一致。半电池不是交互式的，它们只是用于布局。我希望它们没有边框，这样边缘就会有露齿的样子。

对于表格，我将 div 与 display:table 等一起使用。我希望暂时不要求助于 Canvas ，尽管在某些时候我会覆盖强大的图形。

Answer 1

您只能在 2 个边框或 box-shadow 上进行中继，以避免与容器交互。

带有框阴影的示例:

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
}

article {
  margin: 15px;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border: 1px solid;
  background: tomato;
}

div {
  box-shadow: 1px 1px 0 1px;
  grid-column: auto / span 2;
}

div:nth-child(10n),
div:nth-child(10n-9) {
  grid-column: auto / span 1
}

<article>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>