如何在两个div间绘制响应式斜线（Angular项目禁用外部库）

方案一：使用CSS线性渐变（推荐） #

无需额外元素，直接通过父容器的background属性实现响应式斜线，自动适配容器尺寸变化。

假设基础结构为两个同级div嵌套在父容器中：

<div class="container">
  <div class="block block-top"></div>
  <div class="block block-bottom"></div>
</div>

对应的CSS代码：

.container {
  position: relative;
  width: 100%;
  max-width: 800px; /* 可根据需求调整最大宽度 */
  margin: 0 auto;
}

.block {
  width: 100%;
  height: 100px;
  background: #f0f0f0;
  border: 1px solid #ccc;
}

.block-top {
  margin-bottom: 40px; /* 两个块的间距 */
}

/* 绘制两条斜线：上方块右下角→下方块右上角，上方块左下角→下方块左上角 */
.container::before {
  content: '';
  position: absolute;
  top: 100px; /* 对应上方块的高度 */
  width: calc(100% - 20px); /* 左右留边，可根据块的内边距调整 */
  height: 40px; /* 对应两个块的间距 */
  background: linear-gradient(to top right, transparent 49.5%, black 50%, black 50.5%, transparent 51%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.container::after {
  content: '';
  position: absolute;
  top: 100px;
  width: calc(100% - 20px);
  height: 40px;
  background: linear-gradient(to top left, transparent 49.5%, black 50%, black 50.5%, transparent 51%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

• 核心原理：利用线性渐变的颜色断点生成清晰斜线，49.5%和51%的区间避免线条模糊。
• 响应特性：父容器宽度变化时，渐变会自动适配，斜线始终精准连接两个块的对应边角。

方案二：改进SVG实现响应式 #

如果坚持使用SVG，需去掉固定尺寸，改用viewBox和百分比布局：

<div class="container">
  <div class="block block-top"></div>
  <svg class="roadLink" viewBox="0 0 100 100" preserveAspectRatio="none">
    <!-- 上方块右下角→下方块右上角 -->
    <line x1="100" y1="0" x2="100" y2="100" stroke="black" />
    <!-- 上方块左下角→下方块左上角 -->
    <line x1="0" y1="0" x2="0" y2="100" stroke="black" />
  </svg>
  <div class="block block-bottom"></div>
</div>

配套CSS：

.container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.block {
  width: 100%;
  height: 100px;
  background: #f0f0f0;
  border: 1px solid #ccc;
}

.roadLink {
  display: block;
  width: 100%;
  height: 40px; /* 对应两个块的间距 */
}

• viewBox="0 0 100 100"定义SVG的坐标系统，preserveAspectRatio="none"允许SVG拉伸适配容器尺寸。
• 线条坐标基于viewBox的百分比，会随SVG容器尺寸自动调整位置，实现响应式。

Angular适配注意点 #

• 样式可放在组件的styles数组中，避免全局样式污染。
• 若块的高度、间距为动态值，可通过[style.height.px]或ngStyle绑定数据，CSS渐变或SVG的尺寸会自动适配动态变化。

内容的提问来源于stack exchange，提问作者Chloé Charlier