用CSS倾斜的列

Question

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

今天，我发现这个小品中，使用倾斜的边缘单独的列，不列：

，我想知道，这到底是怎么实现的。我简直无法弄清楚，我如何为内容创建一个包装，并与边缘保持一致，尤其是当内容足够长时，可以滚动它。如果我滚动，内部图像会发生什么变化（想像草图底部的6个图像，如果它们到达顶部，则只有4个可见）。

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

如果有人曾与此工作或有经验，我很想听听如何实现这一点。

Answer 1

您可以通过应用做到这一点：

• CSS 2D Transforms
• CSS Clipping Masks

• CSS Pseudo elements + Transforms

• 本身的skewn背景（如果一切都失败）

这里是一个nice article制定上述一些东西。

而这里是another site，它在其中承载着期望的效果。