代码之家 › 专栏 › 技术社区 › Leon1988

标题中多行的斜边

skew transform css

Leon1988 · 技术社区 · 6 年前

我遇到了一个小小的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/ )具有倾斜边 --&燃气轮机;如果没有伪元素,则无法使其在边缘上倾斜。与上述问题相同。

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

4 回复 | 直到 6 年前

rollwurst 6 年前

这应该适用于显示内联:

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>

目前没有边缘支持,因为不支持“框装饰打断”(尚未?)。

Anmol Sandal 6 年前

希望这对你有所帮助。在这里,只需在元素前后应用线性渐变,并将其定位为绝对值。其高度将根据相对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>

user9674579 user9674579 6 年前

查看您提供的链接,
这是我认为最好的答案。。。(希望如此)
正如我在下面的代码片段中所做的那样,增加元素宽度,

    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>

Temani Afif 6 年前

您可以使用多个背景并依赖于重复:

.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>