CSS付きの傾斜したカラム

Question

フロントエンドのものを前にやっているうちに、特に1ページのレイアウトで使用されていた傾斜/斜めのエッジを見つけました。この場合の背後にある原則は、実装が非常に簡単です。

そして、私はこれを達成することができるか、不思議でした：

今日、私はこのスケッチを発見し、それは別の列ではなく行に角度の付いたエッジを使用しています。コンテンツのラッパーを作成するにはどうすればいいですか？特にコンテンツがスクロールするのに十分な長さの場合は、エッジに揃えます。私がスクロールすると、内部の画像はどうなりますか（スケッチの下部に6つの画像があると想像してください。上に達すると4つしか見えません）。

ミドルカラー画像の方がzインデックスが高いと思われますが、最初に斜めのスペースについてテキストがどのように読み込まれるのか、画像が2つしかないことが問題です体の背景。しかし、divが変換される場合、2番目のオプションでもテキストが正しく整列されますか？

誰でもこれを使ったり経験を積んだことがあれば、これがどのように達成されるのか聞いてみたいと思います。あなたは適用することにより、これを行うことができます

Answer 1

：

• CSS 2D Transforms
• CSS Clipping Masks

• CSS Pseudo elements + Transforms

• skewn背景をそれ自体で（すべてが他のここ）

を失敗した場合は、上記のものの一部を策定nice articleです。

ここにanother siteがあり、そこには希望の効果があります。