CSS - 如何在 2 个正方形的中间放置一个矩形

Question

我正在尝试制作这样的东西 2 行 4 个正方形，在 2 个正方形的每个中间都有一个矩形。

我目前的代码：

.main {
  width: 100%;
  height: auto;
}

.square {
  width: 25%;
  position: relative;
  border: 1px solid black;
  float: left;
}

.square:before {
  content: "";
  display: block;
  position: relative;
  padding-top: 100%;
}

<div class="main">
  <div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
  </div>
</div>

我试图做一个矩形类：

 <div class="square">
    <div class="rectangle"></div>
 </div>

.rectangle {
  width: 80%;
  height: 20px;
  position: relative;
  border: 1px solid yellow;
 }

但是我找不到将矩形放置在 2 个正方形中间的方法。这里有什么帮助吗？

Answer 1

不是在每个边框上放置四个矩形，而是使用 ::before 和 ::after 为每个框创建两个，并将它们推到各自框的边框：

html,body{margin:0}
*{box-sizing:border-box;}

.grid{
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 48vw;
    width: 48vw;
}

.grid:nth-child(2){
    float:left;
}

.item{
    border: solid 2px orange;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item::before,
.item::after{
    content: "";
    position: absolute;
    background-color: #000;
}

.item::before{
    width: 65%;
    height: 8%;
}

.item::after{
    width: 8%;
    height: 65%;
}

.item:nth-child(1)::before,
.item:nth-child(2)::before{
    bottom: -3px;
}

.item:nth-child(1)::after,
.item:nth-child(3)::after{
    right: -3px;
}

.item:nth-child(2)::after,
.item:nth-child(4)::after{
    left: -3px;
}

.item:nth-child(3)::before,
.item:nth-child(4)::before{
    top: -3px;
}

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div  class="item"></div>
</div>
<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div  class="item"></div>
</div>