如何使用CSS border-top实现两侧2px、中间5px高的响应式分隔线

单条border-top只能生成统一高度的边框，没法做分段高度差，搭配背景渐变、Flex布局相关属性就能实现目标效果，下面是两种可直接复用的实现方案，全支持响应式适配：

方案1：单标签实现（代码最简洁） #

核心用到的CSS属性：

• linear-gradient 多背景能力绘制三段独立线条
• background-size 分别控制三段线条的高度、宽度
• background-position 将三段线条对齐到容器左、中、右位置
• background-repeat: no-repeat 避免背景平铺
• CSS计算函数实现宽度自适应，不需要额外写媒体查询

HTML结构只需要一个空标签：

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

对应样式代码：

.custom-divider {
  width: 100%;
  height: 5px;
  background:
    /* 左侧2px高线 */
    linear-gradient(#c3b69e, #c3b69e) left / calc(50% - 150px) 2px no-repeat,
    /* 中间5px高线，最大宽度300px，小屏自动撑满 */
    linear-gradient(#c3b69e, #c3b69e) center / min(300px, 100%) 5px no-repeat,
    /* 右侧2px高线 */
    linear-gradient(#c3b69e, #c3b69e) right / calc(50% - 150px) 2px no-repeat;
}

实现逻辑说明：

• 中间段宽度用min(300px, 100%)控制，大屏下保持最大300px宽度，屏幕宽度小于300px时自动撑满容器
• 左右两侧宽度用calc(50% - 150px)计算，自动平分中间段之外的剩余宽度，永远保持等宽；移动端中间段撑满时，两侧宽度计算值为0，自动隐藏
• 渲染效果和实线border完全一致，没有视觉差异

方案2：Flex布局实现（兼容性更好） #

如果需要兼容不支持多背景、CSS min()函数的低版本浏览器，可以用Flex布局搭配伪元素实现，只需要一个空的子元素放中间段：
HTML结构：

<div class="custom-divider">
  <span class="divider-core"></span>
</div>

对应样式代码：

.custom-divider {
  display: flex;
  align-items: center; /* 让不同高度的线条垂直居中对齐 */
  width: 100%;
}
/* 左侧线条 */
.custom-divider::before {
  content: "";
  flex: 1; /* 自动占满剩余宽度 */
  height: 2px;
  background: #c3b69e;
}
/* 中间段线条 */
.custom-divider .divider-core {
  width: 100%;
  max-width: 300px;
  height: 5px;
  background: #c3b69e;
}
/* 右侧线条 */
.custom-divider::after {
  content: "";
  flex: 1; /* 自动占满剩余宽度，和左侧永远等宽 */
  height: 2px;
  background: #c3b69e;
}

实现逻辑说明：

• 利用flex:1的自动伸缩特性，左右两侧线条会自动平分中间段之外的所有宽度，天然等宽
• 中间段设置max-width:300px，大屏下固定最大宽度，小屏下自动撑满，两侧线条自动收缩到0宽度，无需媒体查询即可适配全尺寸设备
• 兼容性覆盖到IE11及以上所有主流浏览器

提示：如果需要调整分隔线颜色，统一替换色值#c3b69e即可；如果要修改中间段最大宽度，方案1里同步修改calc(50% - 150px)中的150px为目标宽度的一半即可。

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