ページ全体を大きくダイナミックに使ったWEBページでの、スクロールによるパララックス効果との相性が良い要素の継ぎ目を斜めにするテクニック 参考元 http://codepen.io/zizzo/pen/HgaDm 要素と要素の継ぎ目を斜めにする方法 HTMLでは通常、要素は四角形で出来ています。 普通1カラムのページなら、ブロック要素を積み重ねるようにして作成していきます 今回斜めにするイメージ 斜めの継ぎ目にする場合も基本的には、長方形のブロック要素を並べるだけなのですが 一つ目のブロック要素のbefore、3つ目のブロックのbefore をそれぞれ 2つ目のブロック要素と同じ色に揃えることで斜め銭のように表現します 色でなくても背景で background-attachment: fixed; を使ってやってもつながった絵になります。 実際に作ったサンプル コードとコードの解説 HTM
![1カラムのスクロール型のページで要素の継ぎ目を斜めにするテクニック | 9ineBB](https://cdn-ak-scissors.b.st-hatena.com/image/square/4fb4d54c385e5062db4b4dc0c438443682f1d20d/height=288;version=1;width=512/https%3A%2F%2F9-bb.com%2Fwp-content%2Fuploads%2F2014%2F07%2F127_0_0_1_49680_0035_index_html.jpg)