背景を斜めにする方法は色々あるが、今回のtransform:rotate;を使ってそれを実現する場合、注意しなくてはならない点が2つある。

rotateで斜め背景を実装する概要

まずは、rotateを使った斜め背景の構築概念から。

背景を斜めにしたいセクションに対して、:before:afterを使って疑似要素を生成。それに背景色を付けて、該当セクションの後ろにブロック要素として配置する。

配置した疑似要素をtransform rotate;で斜めに傾ける。ここで注意しなきゃいけないのは、表示幅100%の要素を傾けるとページ内に隙間が出来てしまう点。

なので、ページ幅よりももっと長いブロックを作って、それを傾ける。

ページからはみ出ている部分が見えなくなるように、疑似要素を包含するブロックを配置。仮に.boxとする。これに、overflow:hidden;ではみ出た部分を隠すように指定する。

あとは、そのセクションの高さに疑似要素を調節すれば完成。...なんだけど、これだとセクションの中の情報量などが変わる場合に、いちいち背景の高さも都度変更しなきゃいけないので面倒。出来るなら、成り行きで高さが変わるボックスのほうがいいよね、と。

ってことで、疑似要素を2枚使いして、セクションの上下に斜めの疑似要素を配置すればいけんじゃない?と。上下に疑似要素、真ん中にはコンテンツの実体要素。

これをいい感じに位置調整すれば、高さが成り行きで変わる斜め背景セクションが出来上がる。

ただ、これには1つ問題点がある。それは、transform: rotate;で傾けた疑似要素は、ウィンドウ幅が要素の幅以上に広がると、斜めのラインがなくなってしまう点。

疑似要素と実体要素を色分けすると分かりやすいかな。こうすると、斜めの疑似要素が、実体要素に埋もれてしまっているがの分かるでしょ?

こうならないようにするには、疑似要素にもっと高さを持たすとか、傾斜を調節するとか。とは言え、ユーザーが使う画面サイズはおおよそ決まっているわけだから、それに耐えられる設計なら問題ないんだけど。

ただ、そうだとしてもなんとなく気持ち悪いんだよね、こういうの。だから、斜め背景のデザインの時は、transform: skew;を使ってる。とは言えそれも、文字がぼやけるなどの症状が出るんだけど。。

他にいい方法ってないよねえ。。