CSSだけで斜めの背景を実現する方法

CSSだけで斜めの背景を実現する方法

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で簡単にできますので、ぜひチャレンジしてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です