こんにちは、ナカムラです。
今回はCSSで角度が変わらない斜めの背景の作り方をご紹介します。
ウィンドウ幅いっぱいに、なおかつ斜めになっているデザインはよく使われます。
やり方はいろいろあると思いますが、今回はclip-pathを使ってみたいと思います。
clip-path - CSS: カスケーディングスタイルシート | MDN
実現したい条件
- 背景はウィンドウ幅いっぱいに表示する
- 斜めの角度は変わらないようにする
- コンテンツのボリュームが変わっても高さが変動するようにする
DEMO
See the Pen 角度が変わらない斜めの背景 by Nakamura (@takayo-nakamura) on CodePen.
HTML
.sectionの中には.section_backgroundと.section_innerの要素があります。
.section__backgroundは背景用の要素で、.section_innerはコンテンツ用の要素になります。
CSS
.section_backgroundはposition: absolute;にし、height: 100%で.sectionの高さに合わせます。
中にある画像を中央に配置し、clip-pathで斜めになるように座標を調整します。
clip-path: polygon(100% 100%,0 calc(100% - 216px),0 256px,100% 0);
polygon()は右下の[x値 y値],左下の[x値 y値],左上の[x値 y値],右上の[x値 y値]という順番になっています。
1. 背景はウィンドウ幅いっぱいに表示する
.section_backgroundはwidth:100%;にし、画像もwidthは100%ですが、min-widthを2000pxにします。
これは2000pxまでの画面を想定しているためなので、作りたい仕様に合わせて変更してください。
このままではコンテンツの幅が常に2560px必要になり、横スクロールが発生してしまうので、.section_backgroundにoverflow: hidden;を入れています。
2. 斜めの角度は変わらないようにする
画像はwidth:100%で良いのでは？と思うかもしれませんがそれだと角度が変わってしまいます。
幅が変動する場合、それに合わせてclip-pathのy値も変わる必要がありますが、そこまでするのは大変なので幅を固定する方法にしています。
3. コンテンツのボリュームが変わっても高さが変動するようにする
.section_backgroundとその中のimgをheight:100%;にすることで、コンテンツが変わっても同じように斜めの背景になります。
imgには object-fit: cover;で要素いっぱいに表示するようにしておきます。
最後に
今回は背景用の要素を設置しています。
背景用の要素を設置せずに、beforeなどの擬似要素を使うことでも再現可能です。
ただし、その場合は.sectionにoverflow: hidden;をつけることになります。
要素内でposition:sticky;を使用したい場合は機能しなくなるのでご注意ください。
