如何为分隔线添加图片或自定义装饰形状（如叶片元素）

不需要用PS导出图片，最优雅的方案是CSS搭配内联SVG实现，无外部资源请求，矢量图形任意缩放不糊，改样式不需要重新作图。

实现思路 #

• 基础分隔线用1px高的纯色块实现，占满容器宽度
• 中间的叶片装饰用伪元素绝对定位到分隔线中点，自带和页面背景相同的底色盖住中间段的分隔线，叶片图形直接用内联SVG写在CSS中，不需要额外加载图片。

可直接复用的代码 #

HTML部分只需要一个语义化的分隔线标签：

<hr class="leaf-divider">

对应CSS样式：

/* 清除hr默认样式 */
.leaf-divider {
  border: none;
  margin: 32px 0; /* 分隔线上下外边距按需修改 */
  width: 100%;
  height: 1px;
  background: #c9b896; /* 分隔线颜色，和设计稿匹配即可 */
  position: relative;
}

/* 中间叶片装饰 */
.leaf-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; /* 叶片整体宽度 */
  height: 28px; /* 叶片整体高度 */
  background: #fff; /* 改成和你页面背景一致的颜色，用来盖住中间的分隔线 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* 内联叶片SVG，fill和stroke后的色值和分隔线保持一致即可，注意#要替换为%23 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' fill='%23c9b896'%3E%3Cpath d='M28 1C23.5 8.2 14.5 11.8 6 12.7c6.3 1.8 16.2 5.4 22 11.7 5.8-6.3 15.7-9.9 22-11.7C41.5 11.8 32.5 8.2 28 1z'/%3E%3Cpath d='M28 3.7v20.6' stroke='%23c9b896' stroke-width='1'/%3E%3C/svg%3E");
}

调整说明 #

• 修改分隔线颜色：同步修改.leaf-divider的背景色，以及SVG内fill、stroke对应的十六进制色值即可
• 修改叶片尺寸：直接调整伪元素的宽高属性，SVG会自动等比缩放
• 更换叶片造型：把自定义的SVG代码转成data url格式，替换掉现有background-image的内容即可，不需要导出任何位图文件
• 适配不同背景：如果页面背景不是纯白，把伪元素的background属性改成对应背景色/渐变即可

相比切图方案，这种实现方式加载速度更快，不会出现图片加载失败装饰失效的问题，适配响应式布局、深色模式都不需要额外准备资源，维护成本低很多。

目标分隔线效果参考图

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