使用 CSS 在 div 上实现倾斜边缘可能具有挑战性,尤其是当目标是响应式解决方案。这个主题之前已经讨论过,但让我们探索一种替代方法。
要创建倾斜的背景,我们可以使用倾斜的伪元素。这使我们能够保持文本不受transform属性的影响。
transform origin属性将伪元素的倾斜定位在右下角,而overflow:hidden;隐藏溢出的部分。最后,负 z 索引将伪元素放置在 div 内容后面。
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; }
<div>slanted div text</div> <div> slanted div text<br/> on several lines<br/> an other line </div> <div>wider slanted div text with more text inside</div>
以上是如何使用倾斜伪元素在 Div 上实现倾斜边缘?的详细内容。更多信息请关注PHP中文网其他相关文章!