CSSのみで要素を斜めに区切る

ランディングページとかで、よく見かける要素の斜め区切り。

ずっとやってみたかったのだ。

「難しいから・・・画像で斜めにしましょうか」と先生に言われてたやつ。



まずヘッダーメニューとヘッダー背景を斜めにした。
中身も一緒に回転しちゃうので背景が10degなら、中身は-10degとかにしてあげると水平になったよ。



フッター部分は、斜めにするとHTMLからはみ出てしまうのでややっこしかった！！

謎の余白が縦に出てしまうので、そこは注意が必要だ。

今回はCSSだけで斜めにしたけど、正直フッター部分は3つの要素をV字見せているので、こういうややこしい場所は、SVG使ってしまえばいいかと思った。

使用したコード　transform: skew();