如何使用倾斜伪元素在 Div 上实现倾斜边缘？

在 Div 上创建倾斜边缘

简介

使用 CSS 在 div 上实现倾斜边缘可能具有挑战性，尤其是当目标是响应式解决方案。这个主题之前已经讨论过，但让我们探索一种替代方法。

使用倾斜的伪元素

要创建倾斜的背景，我们可以使用倾斜的伪元素。这使我们能够保持文本不受transform属性的影响。

transform origin属性将伪元素的倾斜定位在右下角，而overflow:hidden;隐藏溢出的部分。最后，负 z 索引将伪元素放置在 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>
  an other line
</div>
<div>wider slanted div text with more text inside</div>

以上是如何使用倾斜伪元素在 Div 上实现倾斜边缘？的详细内容。更多信息请关注PHP中文网其他相关文章！