実装で使い勝手の良いCSSで斜め背景を作るにはこれだ！
斜め背景のサイトを作成してみようと思い、色々と調べて下記のページを参考にさせて頂いたのですが、実装してみた際にz-indexの指定があると自分の思うように組めなかったので、更に調べてなんとか形にすることが出来たので、そのための備忘録
CSSのみで背景を全体的に斜めにして傾斜をつける方法 -UNORTHODOX WORKBOOK-
詳細は参考サイトを見て頂ければ詳しく説明されているので端折りますが、参考サイトでは擬似要素（contents:before）のところで「z-index: -1」を使って背景部分を一段下げている形になっているのですが、実装した際に他の要素との兼ね合いで思い通りにいかなかったので、z-indexを使わないで済む方法を探していたんですが、中身（contents_inner）に「position: relative」を指定することでz-indexを使わずに済むようになりました。
使い回せるようにCSSを貼っておきます。（contentsとcontents_inner部分は要調整）
角度の変更が必要な場合はcontents:beforeの「transform: rotate」の数値を変更
.contents{
position: relative;
overflow: hidden;
}
.contents:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 2% -10% 0;
background: #fff;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.contents_inner{
padding: 120px 0 140px;
position: relative;
}