HTML/CSSだけで、非平行のオシャレなヘッダーを作る方法

ポートフォリオの作品としてLP（ランディングページ）を制作する際、ヘッダーを普通の平行型ではなく、非平行にすることでオシャレなヘッダーになるのではないかと思い・・・

　
◆イメージ

こんな感じで ヘッダーの背景画像を斜めにしてみたので、その結果を自分用にまとめます。

　
##コード

HTML

<div class="header__bg"></div>

CSS

  .header__bg {
    background-image: url("画像名");
    transform: skewY(-6deg);
    transform-origin: top left;
    box-sizing: border-box;
  }

CSSのtransformプロパティで、画像部分を傾斜したり、回転できたりすることを学んだ。
今回はskewYで-6deg（degは度数）傾斜させました。
画像を傾斜させることで上部に空白ができてしまうので、
それをtransform-origin: top left;で調整しています。

　

##まとめ
非平行ヘッダーは最近色んなサイトで流行している手法なようです。
一気におしゃれになった感じがします！
SVGを使った方が色々対応できそうですが、今回は学習不足ということで、HTML/CSSのみで作ってみました。
SVGを使用すれば色んな非平行ヘッダーが出来そうなので、挑戦してみたいです！
　

参考サイト様
斬新なのに効果的！最近流行している「非平行ヘッダー」の作り方