CSS3 : 斜め背景の作り方

最近よく見る↓のような斜め背景をCSSで実装する方法です。

See the Pen Slant Section by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTML

<section>〜</section>
<section class="slant-section">〜</section>
<section>〜</section>

HTMLはsectionレイヤーに slant-section のクラスを付与するだけです。

CSS

slant-section は以下のような記述です。

.slant-section {
  margin: 100px auto;
}
.slant-section:before {
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  z-index: -1;
  width: 100%;
  height: 150%;
  background: #eee;
  transform: skewY(-5deg);
}
.slant-section + section:before {
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: skewY(-5deg);
}

最初に slant-section に十分な上下マージンを取っておきます。斜めになるのでゆったりした余白が必要です。

次に slant-section の疑似要素 :before にスタイルを設定していきます。
斜めの背景は実は背景ではなく、:before 要素を平行四辺形に傾けたものなのです。

この実装には以下3つの工夫が必要です。

工夫1： transform: skewY()

transform: skewY(-5deg); で対象の要素を5度傾けた平行四辺形にできます。

しかしこれを単純に slant-section にかけると、中身のテキストも含めて傾いてしまうので次の工夫が必要です。

工夫2： before要素を使う

transform 系を使って装飾する時に :before, :after 要素を実体化させて変形する手法がよく使われます。

今回も :before要素を実体化させ、大きな平行四辺形にして slant-section の背景に配置する手法を取っています。

しかしここで別の課題が発生します。 slant-section 内の増減に柔軟に対応するために、完全なpx固定にせず縦150%を指定していますが、内容量によっては大きくはみ出してしまうのです。

工夫3： 次のsectionにもスタイル指定する

そこで最後の .slant-section + section:before のスタイルがあります。

slant-section の次のレイヤーでも同じような白い平行四辺形を作ることで、グレーの平行四辺形がはみ出してくるのを防いでいます。

特殊なレイアウトにはこんな感じで複合的なノウハウが必要なこともあるので、参考になれば幸いです。