css - 标题中多行的倾斜边缘

Question

我遇到了一个小的 CSS 问题。我正在尝试为标题获取倾斜的边缘，这也适用于多行(参见 added screen )。重要提示:倾斜的边缘应该出现在每一行上。

我已经尝试了以下无法 100% 起作用的解决方案:

• :after, :before 元素为三 Angular 形或平行四边形 ( https://css-tricks.com/examples/ShapesOfCSS/ )

.element {
    background: red;
    line-height: 30px;
    width: 100px;
    margin-right: 50px;
    position: relative;
    display: inline-block;
    clear: both;
}

.element:after {
        background: #f00;
        content: "";
        display: block;
        height: 100%;
        transform: skew(-20deg);
        position: absolute;
        right: -5px;
        top: 0;
        width: 30px;
}

<div class="element">Headline 1</div>
<div class="element">Headline 2 veeery long</div>

--> 不适用于多行，因为它需要满足右下角和左上角

• 带有倾斜边缘的多行填充文本 ( https://css-tricks.com/multi-line-padded-text/ )--> 在没有伪元素的情况下无法使其在边缘倾斜。同样的问题。

你能帮我解决这个问题吗？

Answer 1

这应该与内联显示一起使用:

body {
  background: black;
}

div {
  max-width: 300px;
}

h1 {
  line-height: 46px;
  color: #fff;
  background-image: linear-gradient(110deg, transparent 50%, red 53%), linear-gradient(110deg, red 50%, transparent 53%), linear-gradient(to left, red, red);
  background-size: 16px 100%, 16px 100%, calc(100% - 32px) 100%;
  background-position: left, right, center;
  background-repeat: no-repeat;
  display: inline;
  padding: 0 16px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

<div><h1>Some dynamic text on several lines with no special meaning...</h1></div>

目前不支持 Edge，因为不支持“box-decoration-break”(还？)。