html - 倾斜的边缘顶部和底部

Question

我的倾斜顶部和底部 div 面临以下问题。它应该类似于我在这里提供的图片。我想在 div 的顶部使用 before 伪元素，在 div 的底部使用 after 并且底部有点工作，但我只有问题顶部。 有什么想法可以使用我的代码实现这种效果吗？

我希望它看起来像这样:

这是我目前所拥有的:

.example {
  width: 100%;
  height: 700px;
  position: relative;
  background: red;
}

.example:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
  bottom: 0;
  transform-origin: left bottom;
  transform: skewY(-10deg);
}

.example:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  transform-origin: top left;
  transform: skewY(5deg);
}

<div class="example">
  <h1>SOME CONTENT</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p>
  <h2>More Content</h2>
</div>

View on JSFiddle

Answer 1

您遇到的问题是由于伪元素(之前/之后)的 position:absolute 设置造成的。当您将位置设置为绝对时，该元素不再具有任何容器边界以符合并基于 html 主体的左、右、上和下值定位。

现在您的主容器示例 div 的位置从顶部开始，您的 after 伪元素需要稍微高于它以显示倾斜的背景，但由于伪元素不是 block 元素，因此实际上将主 div 向下移动这是 position:absolute 设置。您需要添加上边距以将主 div 向下移动，以便显示其上方设置的伪元素。

这是使用 css 边框属性而不是 css3 转换属性的另一种方法。

https://codepen.io/Nasir_T/pen/GNKLNQ

希望这向您解释了使用边距调整绝对定位伪元素的原因。