标题多行文本的倾斜边缘实现问题求助

架构老林

2026-5-25

实现每行文本都带倾斜边缘的标题效果

嘿，我完全懂你要的效果——让标题的每一行文本边缘都呈现倾斜样式，之前用:before/:after伪元素做形状的思路确实没法覆盖每行的场景，试试这个基于背景渐变的方案，完美解决每行倾斜的需求：

核心解决方案代码

HTML

<h1 class="tilted-edge-heading">这是一段会换行的标题文本，每一行的边缘都有倾斜效果哦</h1>

CSS

.tilted-edge-heading {
  /* 自定义你的背景色，这里用红色示例 */
  background: linear-gradient(10deg, #ff0000 0%, #ff0000 90%, transparent 90%, transparent 100%);
  /* 控制行高，确保倾斜边缘能完整显示 */
  line-height: 1.8;
  /* 给文本左右留一点空间，避免倾斜边缘贴到文字 */
  padding: 0 12px;
  /* 让背景跟随文本行，而不是占满整个块 */
  display: inline;
  /* 关键属性：让每行的背景样式独立渲染，而不是整体拉伸 */
  box-decoration-break: clone;
  /* 兼容webkit内核浏览器（Chrome/Safari等） */
  -webkit-box-decoration-break: clone;
}

关键原理说明

box-decoration-break: clone是核心：它会把元素的背景、边框等样式在每行文本的位置单独克隆渲染，而不是把样式拉伸覆盖整个块级元素，这才让每行都能拥有独立的倾斜边缘。
线性渐变linear-gradient用来模拟倾斜边缘：通过调整渐变角度（比如10deg）和颜色节点的百分比（比如90%），可以精准控制倾斜的方向和边缘宽度。

扩展：实现左右双倾斜边缘

如果需要每行的左右两边都有倾斜效果，只需要调整渐变为双向即可：

.tilted-edge-heading {
  background: linear-gradient(10deg, transparent 0%, transparent 10%, #ff0000 10%, #ff0000 90%, transparent 90%, transparent 100%);
}