サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード

背景を斜めにする方法って、svgとか、::beforeとか、::afterとか、canvasとか、手法はいくつあるんだけど、::before::afterは、色が付いてる背景同士だと斜めの境界線が汚くなるし、svgとかcanvasは、高さを成り行きにしたい場合にちょっとメンテが煩わしい。

なので、個人的にはCSStransform: skewを使う。けど、これも後述するけど文字がにじむ、ぼやけるといったリスクを抱えるんだよね。とりあえず、その解決方法は最後にするとして、まずはskewを使った手法の記述と解説から。

※斜め背景の色々な手法・メリット・デメリットは『斜め背景のボックスを表現する色々な方法の使い方と特徴』にまとめておく

HTML

<div class="item">
 <div class="inner"> ●ここにコンテンツ </div>
</div>
<div class="inner"> ●ここにコンテンツ </div>

CSS

.item {
 background-color: #fff;
 transform: skewY(-3deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.inner {
 padding: 30px;
}
.item .inner {
 transform: skewY(3deg);
}

コード解説

上記のコードだけで簡単に斜めにするレイアウトは実現する。ここからは構造をご紹介。と言っても、構造なんて大したことはなく、よくある背景が異なるだけのブロックが並んでいて、

そのうちの1つをCSSで傾けるだけ。transform: skewY(-3deg);で傾ける。

ただ、これだと傾けた要素内のテキストまで傾いてしまうので、テキストはこのあと元に戻す。そのために、テキストを包含するdivをセットしておき、

このdivに、最初に傾けた外側の値とは逆のtransform: skewY(3deg);を指定することで内側だけが水平になる。

ちなみに、backface-visibility: hidden;は、様々な条件でテキストがぼやけたりする場合の対処用コード。詳細は以下より。

【CSS】transformのskewYを使って背景を斜めにした時、文字がぼやける、にじむ場合の対処法