如何用CSS实现多行文本后方带斜角的背景框且文本可超出效果

实现方案 #

你遇到的多行失效问题核心是默认块级元素的样式只会作用于整个元素块，不会针对每行单独渲染，用box-decoration-break: clone可以解决这个问题，同时用线性渐变实现斜角效果，不需要依赖skew或clip-path，适配性更好。

完整代码 #

CSS代码

.tail {
  font-size: 32px;
  color: #fff;
  line-height: 1.5; /* 控制多行间距，可按需调整 */
  max-width: 600px; /* 模拟换行场景，可根据实际布局修改 */
}

.tail span {
  position: relative;
  padding: 4px 12px;
  /* 核心：让换行后每行都独立应用背景、padding等样式 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tail span::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  /* 用线性渐变实现右侧斜角，调整角度和色标位置可修改斜角大小 */
  background: linear-gradient(-15deg, rebeccapurple 90%, transparent 90%);
  /* 调整左右偏移量实现文本略微超出背景的效果 */
  left: 4px;
  right: 8px;
}

HTML代码

<h1 class="tail">
  <span>Line 1 Text? L2 Lorem ipsum dolor sit amet unde consectetur adipisicing elit. Eaque, alias.</span>
</h1>

关键参数调整说明 #

• 斜角样式：修改linear-gradient的角度数值、色标百分比可以自由调整斜角的方向和大小
• 文本超出幅度：修改伪元素的left和right偏移值，数值越大对应方向文本超出背景的距离越大
• 行间距：修改.tail的line-height数值可以调整多行文本之间的间距

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