非平行ヘッダーはどうやって作る？

ここまでいくつかの非平行ヘッダーの例を見てきましたが、問題はどう作るかということです。
ここからは、非平行ヘッダーの作り方を確認していきましょう。

画像を使う

おそらく非平行ヘッダーを作成する上で最も簡単な方法は、画像を使ってページ上方から背景を敷いていくことでしょう。

trapezoid.png

しかし、画像を使うと、いくつかの問題が発生します。

まず、レスポンシブ対応についてです。
背景を横幅いっぱいに敷いておくと、画面幅によってピクセルが粗くなってしまう場合があります。
また、このような簡素な図形を、外部ファイルを使って読み込むのはページスピードを低下させる原因となります。

そこで、これらの問題を解決するために、次の方法を使ってみましょう。

SVGを使う

JPEG画像をスケッチからエクスポートするのに比べると、インラインSVGを使ったほうがより実践的です。
レスポンシブ対応しやすく、使い回しもしやすく、クロスブラウザ対応で、ベクターデータを使っているので画像が粗くなる心配もないからです。

trap.png
▲ Sketchなどで、このようなSVGファイルを作成します

このように角度をつけた背景を使う場合、決めなければならないことがあります。
それは、スクリーン幅を調整・変更した場合、角度を優先するのか、あるいは左辺と右辺の幅の差の絶対値を優先するのかということです。

例えば、角度を固定した場合、SVGでセットするのは*vw(viewport width, ビューポート幅)*になります。

angle.png

一方、左辺と右辺の幅の差の絶対値を指定する場合はpxで高さを指定します。

pixel.png

これを応用すれば、先ほどの例で見たような複雑な背景スタイルを作成することもできます。

See the Pen Responsive SVG header by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

もしSVGを使った背景を完全にCSSで指定したい場合は、SVGファイルを保存して、下記のように擬似要素を使って呼び出してみてください。

header::after {
　　content: "";
　　position: absolute;
　　bottom: 0;
　　width: 100%;
　　height: 100px;
　　background: url(divider.svg);
}

完全にCSSを使った方法

SVGを使って非平行ヘッダーを作る方法は割とシンプルですが、もしかしたらもっと簡単な方法を探している方もいるかもしれません。
複雑な形をしたヘッダーを作るならSVGを使った方が楽ですが、シンプルな直線や曲線を作るのであれば、CSSだけを使う方法もあります。

その一つが、*「transform: skew;」*を使った方法です。
このプロパティは、画像やボックスを変形させるために用いられ、指定された要素とその子要素が変形します。
背景画像を別のブロックとして用意するという手間がありますが、この方法はStripeのホームページでも使われています。

See the Pen Trapezoid Header Using Transform: SkewY by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

また、*「border-radius」*を使って弧を描く方法もあります。
「border-bottom-radius」を指定することで、丸みを帯させる方法です。

See the Pen Convex elliptical header by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

しかし、いずれの方法も直線・曲線の一部の表現しか扱えないため、万能であるとは言い難いでしょう。
CSSだけを使う方法はややテクニカルなので、まずSVGを使って表現する方法を身につけてみてください。