用CSS倾斜的列

Question

在做一些前端时，我偶然发现倾斜/倾斜/等边缘，特别是在单页面布局上使用。在这种情况下，这背后的原理很容易实现。

今天我找到了这个草图，它使用有角度的边来分隔列，而不是行：

我想知道如何实现这一目标。我根本无法弄清楚，如何为内容创建一个包装器，与边缘对齐，特别是如果内容足够长以滚动它。如果我滚动，内部图像会发生什么（想象如草图底部的6个图像，如果它们到达顶部，只有4个可见）。

我猜中间图像将具有更高的z-index，但仍然存在这样的问题：文本最初将如何加载到有角度的空间，或者只有两行，图像将是背景的身体。但如果div被转换，第二个选项是否也会正确对齐文本？

如果有人曾经使用过这项工作或有经验，我很想知道如何实现这一目标。

Answer 1

您可以通过以下方式执行此操作：

• 的 CSS 2D Transforms
• 的 CSS Clipping Masks

• <强> CSS Pseudo elements + Transforms

• 背景本身（ 如果其他所有方法都失败 ）

这是 nice article 制定上述一些内容。

这里是 another site ，其中包含了所需的效果。