标题中多行的倾斜边缘
Skewed Edges for multiple lines in headline
我运行陷入一点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>
--> 不适用于多行,因为它需要满足 bottom-right top-left 角
- Multi-Line 带有倾斜边缘的填充文本 (https://css-tricks.com/multi-line-padded-text/)
--> 在没有 pseudo-element 的情况下无法使其在边缘倾斜。同样的问题。
你能帮我解决这个问题吗?
看着你link提供,
根据我的说法,这是最佳答案...(希望如此)
像我在下面的代码片段中所做的那样增加元素宽度,
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>
希望这对您有所帮助。这里只是将线性渐变应用于前后元素并将它们定位为绝对。它的高度会根据相对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>
您可以使用多个背景并依赖重复:
.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>
这应该与内联显示一起使用:
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" 不受支持(还?)。
我运行陷入一点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>
--> 不适用于多行,因为它需要满足 bottom-right top-left 角
- Multi-Line 带有倾斜边缘的填充文本 (https://css-tricks.com/multi-line-padded-text/) --> 在没有 pseudo-element 的情况下无法使其在边缘倾斜。同样的问题。
你能帮我解决这个问题吗?
看着你link提供,
根据我的说法,这是最佳答案...(希望如此)
像我在下面的代码片段中所做的那样增加元素宽度,
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>
希望这对您有所帮助。这里只是将线性渐变应用于前后元素并将它们定位为绝对。它的高度会根据相对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>
您可以使用多个背景并依赖重复:
.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>
这应该与内联显示一起使用:
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" 不受支持(还?)。