CSSだけで、以下のページのような斜めの背景を実現する方法をご紹介いたします。
Skewed background with CSS
CSSだけで斜めの背景を実現する方法
CSSで斜めの背景を実装するには、transformプロパティのskewを使います。
まず、HTMLは以下のように親要素と子要素の入れ子にしてあげます。
<div class="parent"> <div class="child">コンテンツ</div> </div>
CSSは以下のようになります。
.parent {
background: #00B285;
transform: skew(0deg, 10deg);
}
.child {
transform: skew(0deg, -10deg);
}
親要素を傾けて、そのままだと中のコンテンツも傾いてしまうので、子要素で傾きを水平に戻しています。
あとがき
実際にやってみると非常に簡単です。斜めになった背景画像を用意しても良いですが、色をつけるだけならCSSで簡単にできますので、ぜひチャレンジしてみてください。