SVG 是绘制山脉分割线最可控方案，需用 viewBox 锁定逻辑坐标系、CSS 控制宽高比，并避免固定像素坐标与内联样式。
用 SVG
纯 CSS 很难做出平滑、可缩放、带抗锯齿的山脉轮廓；SVG 的
常见错误是直接抄固定像素坐标，结果在响应式布局里变形或裁切。正确做法是用 viewBox 锁定逻辑坐标系，再通过 CSS 控制 SVG 宽度（如 width: 100%），让路径自动拉伸。
-
viewBox="0 0 1200 120"表示横向 1200 单位、纵向 120 单位的绘图空间，足够容纳起伏但不过于扁平 - 路径数据推荐用相对命令（小写字母）：例如
m0,0 l100,20 c30,-15 70,10 120,-5，比绝对坐标更易微调 - 避免在
d属性里写死颜色或描边粗细——统一用 CSS 控制：stroke: #4a5568; stroke-width: 2; fill: none;
用 clip-path 把普通元素“剪”成山脉形
如果你已有内容区块（比如一个 ），不想额外加 SVG，可用 clip-path 裁剪其底部边缘。但注意：这不是真·分割线，而是视觉遮罩，下方内容仍存在。
兼容性上，clip-path 在现代浏览器支持良好，但 Safari 对 path() 语法支持较晚（需 Safari 15.4+）。稳妥方案是用 polygon() 近似山脉折线：
.mountain-bottom {
clip-path: polygon(
0% 0%, 20% 8%, 40% 5%, 60% 10%, 80% 4%, 100% 0%,
100% 100%, 0% 100%
);
}
要点：
- 前半段 y 值控制“山峰”高度（建议保持在 3%–12% 区间，太大会割裂感强）
- 必须闭合路径：最后一行从右下角回到左下角，否则裁剪失效
- 不要依赖
clip-path: path("...")在生产环境——它在部分安卓 WebView 和旧版 Edge 中不工作
用 CSS 渐变叠加模拟远山层次感
若只需氛围感而非精确轮廓，三层线性渐变叠加是轻量且高性能的方案。适合做页面顶部或底部的“远景山脉”装饰，不承担分隔语义。
原理是用多个 background-image 叠加不同高度、透明度和偏移的渐变条，模拟远近错落：
.distant-mountains {
height: 80px;
background-image:
linear-gradient(90deg, transparent 30%, #a0aec0 30%, #a0aec0 70%, transparent 70%),
linear-gradient(90deg, transparent 20%, #718096 20%, #718096 50%, #718096 80%, transparent 80%),
linear-gradient(90deg, transparent 10%, #4a5568 10%, #4a5568 40%, #4a5568 60%, #4a5568 90%, transparent 90%);
background-size: 100% 20px, 100% 15px, 100% 10px;
background-position: bottom 0px, bottom 20px, bottom 35px;
background-repeat: no-repeat;
}
容易踩的坑：
- 每层渐变的
background-size高度要递减，否则看不出纵深 -
background-position必须用具体像素值（不能用百分比），否则各层对不齐 - 别给容器设
overflow: hidden——渐变本身无溢出，加了反而可能截断边缘
响应式下 SVG 山脉线的高宽比维护
很多人把 SVG 写死 height="120"，一缩放就糊或拉伸变形。真正健壮的做法是只设 width: 100%，并确保 viewBox 的宽高比合理（如 1200 120 是 10:1），再用 preserveAspectRatio="xMidYMid meet" 防止裁切。
如果需要精确控制 SVG 在不同断点下的高度，不要改 height 属性，而是用 CSS 的 aspect-ratio：
.mountain-divider {
width: 100%;
aspect-ratio: 10 / 1;
}
注意：
-
aspect-ratio在 Firefox 89+、Chrome 88+、Safari 15.4+ 支持，老版本需回退为 JS 动态计算高度 - 千万别给 SVG 内部的
transform: scale()——会破坏描边粗细和抗锯齿质量 - 导出 SVG 时关闭“响应式”选项（Sketch/Figma 默认勾选），否则可能注入无效
width/height属性覆盖 CSS
山脉分割线最难的不是画得像，而是让它在 Retina 屏上不发虚、在窄屏上不堆叠、在滚动时不出白边——所有这些都取决于你是否把坐标系、缩放逻辑和渲染上下文真正理清楚了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
