背景の角度をそのままに、斜めに切り取ったような形にする方法を知りたいです。

Question

下記のサイトのように、背景を斜めに切り取ったような形にしたいと考えています。
その方法をご教示いただけないでしょうか。

■目標とするページ
https://www.wdb-k.co.jp/

「背景　斜め　CSS」で検索し、いくつか試してみたのですが、
背景と背景の間にborderで作成した三角形を挿入するやり方や、
背景自体を回転させる方法しか見当たらず、
背景の角度はそのままに、上下を斜めに切り取る方法が見当たりませんでした。

背景が「画像→塗りつぶし」のような形であれば、塗りつぶしの部分の背景を回転させることで、
対応できるのですが、目標とするページのように背景が「画像→画像」となっている場合であっても
対応できる方法が把握できておりません。

clip-pathで調整する方法はあったのですが、IEでは未対応とのことで、
より多くのブラウザで対応できる様にしたいと考えております。

検証ツールで目標のページのソースを確認したのですが、
どこが該当の部分かわかっておりません。

背景の角度をそのままに、斜めに切り取る方法をご存じの方がいらっしゃいましたら、
是非ご教示いただきたいです。

よろしくお願い致します。

試したこと

・背景と背景の間に三角形を挿入する方法
https://taneppa.net/bg_separate_css/

・背景を回転させる方法
https://qiita.com/sho012b/items/3478ca65fe5b6de0450a

・clip-path
https://bennettfeely.com/clippy/

Answer 1

対象のウェブサイトのコードを確認していただければいいと思いますが、
背景画像→背景画像のように見えていますが、実際には背景画像→背景塗り→背景画像になっています。
<div class="inclination-b">の部分です。

Comments

[matahiro]

アドバイスありがとうございます！

Answer 2

transform:rotate()を使ってできます。

こんな感じで。
https://codepen.io/lisa1111/pen/XWmprrP

仕組みとしては
・ブロックの親を回転させ斜めを作る
・背景を付けた子を逆回転して角度を戻す
みたいな感じです。

このやり方だと、回転して余白ができる部分をscale()を使って調整する必要はありますが、
「画像→画像」でも背景をclipしたようにできます。

Comments

[matahiro]

アドバイスありがとうございます！