サンプル
See the Pen Codepen by Tora (@webtoranomaki) on CodePen.
コード
背景を斜めにする方法って、svg
とか、::before
とか、::after
とか、canvas
とか、手法はいくつあるんだけど、::before
や::after
は、色が付いてる背景同士だと斜めの境界線が汚くなるし、svg
とかcanvas
は、高さを成り行きにしたい場合にちょっとメンテが煩わしい。
なので、個人的にはCSS
を使う。けど、これも後述するけど文字がにじむ、ぼやけるといったリスクを抱えるんだよね。とりあえず、その解決方法は最後にするとして、まずはの
transform: skewskew
を使った手法の記述と解説から。
※斜め背景の色々な手法・メリット・デメリットは『斜め背景のボックスを表現する色々な方法の使い方と特徴』にまとめておく
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;は、様々な条件でテキストがぼやけたりする場合の対処用コード。詳細は以下より。