标题中多行的倾斜边缘答案

【问题标题】：Skewed Edges for multiple lines in headline标题中多行的倾斜边缘
【发布时间】：2018-04-24 07:09:27
【问题描述】：

我遇到了一点 CSS 问题。我试图让标题的边缘倾斜，这也适用于多行（参见added screen）。重要提示：倾斜的边缘应出现在每一行上。

我已经尝试了以下无法 100% 工作的解决方案：

:after, :before 元素为三角形或平行四边形 (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/) --> 不能使它在没有伪元素的情况下偏斜。和上面一样的问题。

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

【问题讨论】：

你用背景图试过了吗？

标签： css transform skew

【解决方案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;
}

&lt;div&gt;&lt;h1&gt;Some dynamic text on several lines with no special meaning...&lt;/h1&gt;&lt;/div&gt;

目前不支持 Edge，因为不支持“box-decoration-break”（还没有？）。

【讨论】：

太棒了！这就是我一直在寻找的！

【解决方案2】：

希望这对您有所帮助。这里只是在元素之前和之后应用线性渐变并将它们绝对定位。它的高度会随着相对div的高度而增加。

如果您想增加弯曲区域，您只需要更新宽度并根据给定宽度的数量左右放置它们。如示例中所做的那样。

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

.element:after, .element:before {
     
        content: "";
        width: 10px;
        position:absolute;
        height: 100%;
        
        
}
.element:before {
 top: 0px; background: linear-gradient(to top left, #ff0000 50%, transparent 50%);
 left: -10px;
}
.element:after {
 top: 0px; background: linear-gradient(to bottom right, #ff0000 50%, transparent 50%);
 right: -10px;
}

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

【讨论】：

感谢您的快速回答！不幸的是，这个解决方案并不适用于每一行......正如您在添加的屏幕中看到的那样，我需要为每一行提供倾斜的边缘。

【解决方案3】：

查看您提供的链接，
在我看来，这是最好的答案......（希望如此）
像我在下面的代码 sn-p 中所做的那样增加元素宽度，

    width: 200px;

可以按照您想要的方式正常工作Sample Here

全屏查看Code snippet

.element {
    background: red;
    line-height: 30px;
    padding : 10px ;
    width: 200px;
    position: relative;
    display: inline-block;
    clear: both;
}

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

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

【讨论】：

感谢您的快速回答！不幸的是，这个解决方案并不适用于每一行......正如您在添加的屏幕中看到的那样，我需要为每一行提供倾斜的边缘。
正如我在添加的屏幕中看到的那样 ~ 我已经编辑了我的答案，希望它有效

【解决方案4】：

您可以使用多个背景并依靠重复：

.element {
  background: red;
  margin:10px;
  line-height: 30px;
  width: 100px;
  padding:0 30px;
  display: inline-block;
  position:relative;
  background:
  linear-gradient(to bottom right,red 50%,transparent 0)100% 0/30px 30px repeat-y,
  linear-gradient(to top left,red 50%,transparent 0)0 0/30px 30px repeat-y,
  linear-gradient(red,red)30px 0/calc(100% - 60px) 100% no-repeat;
}

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

【讨论】：