HTMLで斜めデザインを作る！3つのやり方

フロントエンドエンジニアのフジオカです。
最近見かけることが多くなったおしゃれな表現「斜めデザイン」。
コーディングする際、現時点で思っていたよりいろんな方法で対応ができたので備忘録がてらブログにしたためようと思います。

1.borderで斜めをつくる

斜めにしたい要素にposition: relative;を指定して疑似要素で斜めの要素を作りposition:absolute;で位置を調節します。

上記例ではborder-leftとborder-rightの値を100vwにしているので見るブラウザ幅によっては斜めの角度が変わってしまいます。
px等で固定にしてあげると変わらなくなりますが、指定の幅以上は切れてしまうのでレスポンシブで細かく調整してあげる必要があります。
他にもpaddingで上下の余白を計算したり等々の手間があるので、個人的には思いつきやすいけど修正がちょっと大変かな…と思う方法です。

2.transformで斜めをつくる

transformプロパティのskewで要素に傾斜を付けることで斜めのデザインを作ります。

https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/skew

疑似要素にtransform: skewY;を追加することで中の要素は斜めにせずに表示しています。
斜めの角度はdegで指定をしているので ウィンドウ幅が変わっても同じ角度を保ったままレスポンシブ対応も可能です。 （transform-originの追加も忘れずに！）

3.clip-pathで斜めをつくる

clip-pathプロパティのpolygonで要素に付けて斜めのデザインを作ります。

https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

上記の例では斜めにする要素の中にwrapperを追加して高さも調整しています。
斜めの角度はvwで指定することでウィンドウ幅が変わっても同じ角度を保ったままレスポンシブ対応も可能です。

clip-pathの値ってどこがどこに対応してるのかよくわからない…という時はジェネレーターも頼りましょう。
https://bennettfeely.com/clippy/
こちらのジェネレーターは斜めだけじゃなく様々な形のサンプルがあり、角度もドラッグで好きに調整ができるので実装の時だけじゃなくclip-pathの構造を理解するのにも便利です！
（わたしもこちらで値を勉強してます、感謝！）

奥が深い斜めデザイン

斜めのデザインひとつとっても再現する方法がいろいろあるのは勉強になりました。
（clip-pathの手段はIEでは非対応のようですが、2022年にサポート終了のため考慮していないです）
clip-pathは値だけでなくsvgでの切り抜き等にも使えるので、ブラウザのみで画像を特殊な切り抜きを表現したいときにも便利です。
画像の場合、ブラウザで切り抜きすれば出力時の手間が減りますし、差し替え時にも毎回切り抜きしなきゃ…がなくなるので更新もしやすくなりそうです。
また理解しきれていないところもあるので、斜めデザインの使えるタイミングでどんどん使っていきたいです！