如何实现旋转45度的div元素无缝相邻拼接？

当前页面状态 #

预期实现效果 #

问题原因 #

CSS transform: rotate() 只会修改元素的视觉渲染效果，不会改变它在文档流中的原始占位尺寸。100px100px的正方形旋转45度后，视觉上变成对角线约141.4px的菱形，但布局时仍然按照100px100px的正方形计算间距和位置，因此直接用flex布局会出现菱形错位、无法拼接的问题。

解决方案 #

通过调整元素外边距、容器行间距和交错行偏移量即可实现目标效果，修改后的完整代码如下：

CSS代码 #

.box {
    border-style: groove;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    /* 抵消旋转后左右突出部分的多余间距 */
    margin: 0 -20.7px;
    /* 可选：让内部文字居中 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 可选：内部文字反向旋转，恢复正向显示 */
.box .content {
    transform: rotate(-45deg);
}
/* 容器行间距适配菱形垂直拼接 */
.diamond-wrap {
    row-gap: 29px;
}
/* 每行5个的场景下，偶数行首个元素偏移半个菱形宽度，实现交错排列 */
.diamond-wrap .box:nth-child(5n + 6) {
    margin-left: calc(100px * 0.707);
}

HTML代码 #

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Body -->
<div class="d-flex w-100 h-100 justify-content-center align-items-center p-5">
  <div class="diamond-wrap d-flex flex-wrap justify-content-center align-items-center">
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
    <div class="box"><span class="content">test</span></div>
  </div>
</div>

补充说明 #

如果需要调整每行展示的菱形数量，只需要修改nth-child(5n + 6)中的5为你想要的每行个数即可。如果不需要文字正向显示，去掉.content相关的样式和HTML标签即可。

内容的提问来源于stack exchange，提问作者SansSerif