こんにちは、ナカムラです。 今回は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は背景用
![角度が変わらない斜めの背景の作り方(CSS) - arms inc. Engineers' Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/50054535d9491b4df030fa452ff18ce753e24160/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Farms-nakamura%2F20230914%2F20230914182214.jpg)