文本后面带有多行剪辑路径的方框

Question

我正在尝试为附加图像创建css在这里。然而，我不确定如何在文本后面创建一个包含斜角的框。我试过使用倾斜和剪辑路径。但是，当文本像附件图像一样出现在多行中时，问题就出现了。此外，文本有点超出框，我相信剪辑路径的位置。

.tail{
font-size: 32px;
color: #fff;
position: relative;
z-index: 2;
span{
&:after{
content: '';
background-color: rebeccapurple;
position: absolute;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
z-index: -1;
}
}

<h1 class="tail">
<span>Line 1 Text? L2 Lorem ipsum dolor sit amet un...</span>
</h1>

Answer 1

你可以尝试下面的背景颜色:

body {
background-color: black;
}
.tail span {
padding:0 30px 0 10px;
background: linear-gradient(-60deg, #0000 20px, rebeccapurple 0);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

<h1 class="tail">
<span>Line 1 Text? <br /> L2 Lorem ipsum dolor sit amet un...</span>
</h1>