如何在两个div与下方文本间绘制不规则折线并满足指定样式要求

下面是3种不需要额外4个div的实现方式：

CSS伪元素实现（最常用，无额外DOM节点） #

不需要新增独立div节点，仅依托现有盒子和父容器的::before、::after伪元素即可完成所有效果：

• carret定位：给第一个盒子设置position: relative后，新增::after伪元素，设置position: absolute; top: 100%; left: 50%; transform: translateX(-50%);即可固定在盒子正下方中间位置，通过border或者clip-path属性可以裁剪出任意你需要的carret形状，直接设置背景/边框颜色即可满足和上方、侧边背景区分的要求。
• 不规则连线：两个盒子之间的折线、盒子到下方文本的连线都可以通过父容器的伪元素绘制，拆分横线和竖线分别定位拼接即可，也可以用clip-path直接生成折线形状的伪元素一次完成。

示例代码参考：

/* 第一个盒子基础样式 */
.first-box {
  position: relative;
  width: 220px;
  height: 90px;
  background: #ffffff;
  border: 1px solid #eaeaea;
}
/* 正下方中间carret实现 */
.first-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* 三角形carret示例，可替换为clip-path自定义形状 */
  border: 12px solid transparent;
  border-top-color: #f2f3f5; /* 此处颜色可自定义，和其他区域背景区分 */
}
/* 两个盒子之间折线示例（父容器需设置position: relative） */
.box-container::before {
  content: "";
  position: absolute;
  left: 230px; /* 第一个盒子右侧外10px位置 */
  top: 45px; /* 第一个盒子垂直居中位置 */
  width: 60px;
  height: 2px;
  background: #cccccc;
}
.box-container::after {
  content: "";
  position: absolute;
  left: 290px;
  top: 45px;
  height: 110px; /* 两个盒子的垂直偏移距离 */
  width: 2px;
  background: #cccccc;
}

SVG内嵌实现（适合复杂形状/动画需求） #

如果连线形状复杂、后续需要调整路径或者加交互动画，可以直接在父容器内嵌入一段SVG代码：

• 用<path>标签绘制任意不规则连线，设置stroke属性定义线条样式
• 用<polygon>标签绘制carret形状，将SVG整体绝对定位到第一个盒子正下方即可
  优势是缩放不会失真，修改路径只需要调整path的d属性即可，适配性更强。

背景渐变实现（无任何额外节点） #

如果不想用伪元素也不想加任何DOM节点，可以给父容器设置多层linear-gradient、conic-gradient渐变，拼接出连线和carret的形状，适合形状固定不需要频繁调整的场景，缺点是参数调整成本相对较高。

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