我几天来一直在寻找使 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>
创建您的 div,然后覆盖一个绝对定位的旋转伪元素以创建倾斜的效果。
div {
height: 50px;
width: 300px;
background-color: black;
position: relative;
overflow: hidden;
}
div:after {
height: 100%;
width: 100%;
background-color: white;
position: absolute;
content: "";
transform: rotate(45deg);
transform-origin: bottom right;
}
<div></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)