用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，它在其中承載着期望的效果。