section全体を斜めにしているけど、擬似要素を使っているので、section内のテキストは傾斜しない。
ここの部分のテキスト量が十分にない場合は、.contetnts__innerのheightを100%ではなく、500pxとか直接高さを指定したほうがいいかも。
または、.contetnts:beforeの高さや角度を調整する。
widthを100%のままで傾斜を与えると余白ができるので、120%にして親をoverflow:hiddenしている。またネガティブマージンを与えて左えずらして中央へ。その他、もろもろの調整を行っている。
擬似要素にはz-indexに-1を与える必要がある。
transform:rotateの値を-3degにすれば、当然ながら傾斜を逆にすることができる。
角度を変更しただけでは、形がおかしくなってしまうんだけど、これについてはtransform:originが影響している。
上記の例(斜めの背景)ではtransform:originは、left centerとなっており、変形の原点が左の真ん中になっている。これをright centerとしてあげることで、正常な形になる。
その他は全て上記の例(斜めの背景)と同じ。
擬似要素:afterを追加し、z-indexの値を調整することで上と下で交差させることができる。
具体的には、:after擬似要素のtransform:rotateの値を-3degにしてtransform:originの値をleft centerにしている。つまり、上記の2つの例をそれぞれ上下で合体させた感じ。
あとはbackgroundの色を変えただけで、その他の部分はそれぞれ上記の例と全く同じ。