如何在两列间垂直居中线上添加菱形（规避边框冲突）

嘿，这个问题其实很好解决——我们不用去碰.box的边框，而是利用Grid列之间的间隙（column-gap）来放置分隔线和菱形，这样就完全不会和box的边框冲突啦！

核心思路 #

Grid已经给两列留了8%的间隙，我们就把分隔线和菱形放在这个空隙里，通过绝对定位来精准控制位置，完全不干扰左右两个.box的样式。

修改后的完整代码 #

CSS部分：

.box { 
  background: #ccc; 
  padding: 25px 20px; 
  margin-bottom: 10px; 
  border: 1px solid red; 
}
.box p, .box a { 
  display: block; 
  text-align: center; 
}
.grid { 
  padding: 20px; 
  display: grid; 
  grid-template-columns: repeat(2, 45%); 
  grid-column-gap: 8%; 
  position: relative; /* 给绝对定位的元素提供参照 */
}
/* 垂直分隔线：利用grid的伪元素 */
.grid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(45% + 4%); /* 45%是第一列宽度，4%是gap的一半，刚好在间隙中心 */
  width: 1px;
  background-color: red;
}
/* 菱形：绝对定位到分隔线的位置，垂直居中 */
.rhomb { 
  box-sizing: content-box; 
  width: 20px; 
  height: 20px; 
  border: none; 
  background: red; 
  position: absolute;
  top: 50%;
  left: calc(45% + 4% - 10px); /* 往左移10px，让菱形中心对齐分隔线 */
  transform: rotate(-45deg) translateY(-50%); /* 先旋转再垂直居中 */
  margin: 0; /* 去掉原来的margin，用定位控制位置 */
}

HTML部分：

把菱形放到.grid容器内部，这样它的定位会基于grid：

<div class="grid">
  <div class="box">
    <p>Some text</p>
    <a href="#">link1</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link2</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link3</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link4</a>
  </div>
  <div class="rhomb"></div> <!-- 移到grid内部 -->
</div>

关键细节解释 #

• .grid加position: relative：让内部的.rhomb和伪元素可以基于grid容器定位，不会乱跑。
• grid::before的left计算：45%是单列宽度，加上gap的一半（8%/2=4%），刚好落在两列间隙的正中间，完美避开左右box的边框。
• 菱形的垂直居中：用top:50%加translateY(-50%)，再配合left的调整，让菱形刚好卡在分隔线上，视觉上完全对齐。

这样修改后，分隔线和菱形都在两列的间隙里，和.box的边框完全没有冲突，而且布局更稳定哦！

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