我已经搜索了几天,寻找能让 div 右侧倾斜 45 度的代码。以下是我尝试实现的示例图像...
似乎有很多“倾斜边缘”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>
transform: rotate(45deg)
的方式进行旋转。 - Keith M