Question

我有一个用transform: skew(0deg, -3deg )translateY(-6vh)转换过的容器，但是我将其用作页脚，因此我希望它在底部完全平坦。如何在不用另一个具有相同背景色的容器将其覆盖的情况下实现它？（我不想让事情变得混乱）。

Answer 1

~~我将使用::before伪元素。我不知道如何让::before元素进入主元素，因此您虽然损失了一些空间，但是还算不错。~~

使用::before严重失败。另外，如果仅将背景色放在元素上并使用足够宽的屏幕，则可以看到使用转换的一些奇怪之处。

因此，我不会使用它，而只是使用SVG来为您提供所需的倾斜。 svg和div之间有一个奇异的空间，所以我使用定位来解决这个问题。

您可以使用这些值来获得自己喜欢的倾斜度，但建议它会根据屏幕宽度而变化。

#footer {
  position:relative;
  overflow:hidden;
}
svg {
  width: 100%;
  fill: green;
  max-height: 50px;
  position:absolute;
  top:0;
}

#footerContent {
  margin-top:49px;
  height: 100px;
  background: orange;
}

<div id="footer">
  <svg viewBox="0 0 100 20" preserveAspectRatio="none">
    <polygon points="0,20 100,20 100,0" />
  </svg>
  <div id="footerContent"></div>
</div>

如何弄平倾斜的容器的底部？

1 个答案: