我遇到了一个小问题。我试图获得标题的倾斜边缘,这也适用于多行(参见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>
&#13;
- &GT;不适用于多行,因为它需要满足右下角的左上角
你能帮我解决这个问题吗?
答案 0 :(得分:0)
看着你提供的链接,
根据我这是最好的答案...(希望如此)
像我在下面的代码片段中那样增加元素宽度
width: 200px;
将以您想要的方式正常工作documentation
全屏查看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>
答案 1 :(得分:0)
希望这会帮助你。这里只是将线性渐变应用于元素之前和之后,并将它们定位为绝对值。它的高度将根据相对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;
}
&#13;
<div class="element">Headline 1</div>
<div class="element">Headline 2 veeery long</div>
&#13;
答案 2 :(得分:0)
您可以使用多个背景并依赖重复:
.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>
答案 3 :(得分:0)
这应该与显示内联:
一起使用
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;
}
&#13;
<div><h1>Some dynamic text on several lines with no special meaning...</h1></div>
&#13;
现在没有Edge支持&#34; box-decoration-break&#34;不支持(还是?)。