我一直在寻找几天的代码,以使div的右边缘倾斜45度。以下是对我特别企图得到一个形象的例子...如何实现倾斜的右边缘div?
似乎那里有很多的“倾斜的边缘” 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>
您将需要结合2个或3的div,具有负的右内侧一个偏移,并通过旋转的东西像'变换:旋转(45deg)' –
基思...我是我理解'抵消'足以试验你的建议。 –