如何为<h1>文本添加自适应斜向彩色背景且不倾斜文本？

直接用百分比控制渐变起止点会因为文本长度变化导致斜切位置偏移，试试用固定长度结合box-decoration-break属性实现，完美满足你的所有需求：

核心CSS代码 #

h1 {
  display: inline;
  padding: 0.3em 1em; /* 控制文本与背景边界的间距，上下/左右可单独调整 */
  background: linear-gradient(12deg, transparent 15px, lightblue 15px, lightblue calc(100% - 15px), transparent calc(100% - 15px));
  line-height: 2; /* 适配多行文本，避免背景重叠 */
  /* 关键属性：让多行文本的每一行都独立渲染背景 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容Chrome/Safari等webkit内核浏览器 */
}

方案说明 #

• 适配任意长度文本：用15px这类固定长度代替百分比控制斜切宽度，不管文本长短，斜切边界的宽度一致
• 控制斜向角度：直接修改linear-gradient里的12deg即可调整斜切角度
• 文本不倾斜：仅背景应用渐变，文本保持正常排版
• 支持多行文本：display: inline配合box-decoration-break: clone，让每一行文本都生成独立的斜向背景块
• 背景不截断：padding预留足够空间，结合box-decoration-break避免背景被文本边界截断
• 文本与边界间距：通过调整padding的左右值（这里是1em）控制文本和背景斜切边界的距离

自定义调整点 #

• 想要更宽/窄的斜切边界：修改15px为你需要的长度
• 调整背景颜色：替换lightblue为目标颜色
• 改变上下间距：调整padding的第一个值（0.3em）

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