gpt4 book ai didi

html - 如何实现倾斜的右边缘 div?

转载 作者:搜寻专家 更新时间:2023-10-31 08:41:01 24 4
gpt4 key购买 nike

<分区>

我这几天一直在寻找使 div 右边缘倾斜 45 度的代码。这是我特别尝试获得的图像示例...

Enter image description here

似乎有很多“倾斜边缘”div 的示例,但我找不到任何具有特定右侧倾斜的示例。

我花了很多时间试图修改其他人的代码,但结果一团糟。

这是我为获得我需要的结果而试验的原始 CSS 代码...

    div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}

div:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}

body {
background:
url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
background-size: cover;
}

这是 HTML....

    <div>Slanted div text</div>
<div>
Slanted div text<br/>
on several lines<br/>
Another line
</div>
<div>Wider slanted div text with more text inside</div>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com