2022/11/14 2022/11/13

【HTML+CSS】CSSでclip-pathを使って背景色・背景画像を斜めにデザイン・実装する方法

CSSでclip-pathを使って背景を斜めにデザイン・実装する方法

背景画像や背景色が斜めに切り取られてあるデザインのサイトをたまに見かけますが、私は今回の案件で初めて実装しました。

初めはXDのデザインカンプですでに加工してある画像を使用して実装しようとしたのですが、それだとレスポンシブには対応してませんでした。

デザインカンプのwidth以上に広い画面で表示すると、斜めに切り取って加工してある画像が斜めではなくなり長方形に変形してしまいました。

背景色だけでしたらtransformのskewやrotateを駆使して実装することも可能ですが、背景画像ですと画像が歪みうまく実装できません。

そこで今回はCSSのclip-pathプロパティで実装しました。

画像のbefore→after

before
before
after
after

beforeの背景画像をclip-pathで右下を斜めに切り取った感じにデザインしたのがafterの画像です。

beforeの画像はbackgroundで3つの背景画像を重ねています。

背景画像をレイヤーや複数枚重ねる方法は、こちらの記事を参考にしてみてください。

【HTML+CSS】簡単に背景画像に半透明レイヤーを重ねたり複数の画像を重ねる方法

HTML

<section class="bg_img">
</section>

CSS

.bg_img {
  width: 100%;
  height: 100vh;
  background-image: url(../img/pt_bg.png), url(../img/cat7.jpg),
    url(../img/cat3.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, right, center;
  background-size: contain, contain, cover;
  clip-path: polygon(0 0, 100% 0, 100% 67%, 0 100%);
}

今回の背景色・画像を斜めに切り取るのに大事なコードはこちら。

clip-path: polygon(0 0, 100% 0, 100% 67%, 0 100%);

clip-pathの使い方

clip-path: polygon(左上, 右上, 右下, 左下);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

0 0はX軸が0, Y軸が0の点を示しています。（画像の左上）
100% 0はX軸が100%, Y軸が0の点を示しています。（画像の右上）
100% 100%はX軸が100%, Y軸の点を示しています。（画像の右下）
0 100%はX軸が0, Y軸が100%の点を示しています。（画像の左下）

clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);

calc(0% + 7vw)のように計算式を使用すると、画面幅が変化した時も同じ角度を保てます。

しかし、連続してセクションの背景画像を斜めに切り取るclip-pathを使用する際は、値を計算式にすると画面幅によってセクションとセクションの間に隙間ができてしまうので使用できません。

その場合は数値を％で指定すると画像を切り取る角度は変わってしまいますが、セクション同士の繋ぎ目は綺麗にレスポンシブ対応になります。

状況によって臨機応変に使い分けてみてください。

READ MORE IN BLOGS