【CSS】transform skewで背景を斜めに表示させる

下のデモのような、斜めに背景画像を表示させる方法です。

demo

※デモはPCのみ対応

こんな感じのサイト、よく見かけますね。

HTML

<div class="container">
  <div class="content1">
    ～省略～
  </div>
  <div class="bg-image"></div>
  <div class="content2">
    ～省略～
  </div>
</div>

CSS

.content1,
.content2 {
  position: relative;
  z-index: 2;
}
.bg-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 80%;
  background-image: url(./image.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  z-index: 1;
}
.bg-image::before,
.bg-image::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 40%;
  background-color: #fff;
  -webkit-transform: skewY(8deg);
  transform: skewY(8deg);
  z-index: 1;
}
.bg-image::before {
  top: -40%;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
.bg-image::after {
  bottom: -40%;
}

念のためにプレフィックスを入れてます。

細かい数値は調整して使って下さい。

このように、transform: skew で要素を斜めに変形させることができます。

transform: skew(X軸の傾き, Y軸の傾き); //傾きの単位はdeg

transform: skewX(傾き);

transform: skewY(傾き);

使いどころは限られているかもしれませんが、覚えておいて損はないでしょう。

アクセントに使って下さい。

ちなみにbackground-attachment:fixed;はスマホには対応してないので、別途対応して下さい。今回は割愛します。