如何使用CSS为图片间的分隔链接设置样式？

你当前的代码中，两个分隔线div默认是块级上下堆叠布局，再加上transform: translateX(20px)仅做水平位移，导致垂直方向线条重叠，无法达到预期效果。以下提供两种修正方案：

方案一：调整现有布局结构 #

通过flex布局让两个分隔线元素横向排列，调整尺寸避免重叠：

.divider {
  padding: 0 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.style-seven {
  border-bottom: 1px dashed #8c8c8c;
  border-left: 1px dashed #8c8c8c;
  border-bottom-left-radius: 20px;
  height: 50px;
  width: 45%;
}

.style-seven-2 {
  border-top: 1px dashed #8c8c8c;
  border-right: 1px dashed #8c8c8c;
  border-top-right-radius: 20px;
  height: 50px;
  width: 45%;
}

HTML保持不变：

<div class="divider">
  <div class="style-seven"></div>
  <div class="style-seven-2"></div>
</div>

方案二：单元素简洁实现 #

利用伪元素减少DOM节点，更易维护：

.divider {
  padding: 0 180px;
  position: relative;
  height: 100px;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.divider::before {
  left: 180px;
  width: 45%;
  height: 50px;
  border-bottom: 1px dashed #8c8c8c;
  border-left: 1px dashed #8c8c8c;
  border-bottom-left-radius: 20px;
}

.divider::after {
  right: 180px;
  width: 45%;
  height: 50px;
  border-top: 1px dashed #8c8c8c;
  border-right: 1px dashed #8c8c8c;
  border-top-right-radius: 20px;
}

HTML简化为：

<div class="divider"></div>

两种方案都能实现你想要的左右带圆角的虚线分隔效果，避免线条重叠。

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