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

CSSだけで斜めの背景を実現する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 年間$149ドルで10万点以上の映像素材をダウンロードし放題!
  • このエントリーをはてなブックマークに追加

CSSだけで、以下のページのような斜めの背景を実現する方法をご紹介いたします。

Skewed background with CSS

スポンサードリンク

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

CSSで斜めの背景を実装するには、transformプロパティのskewを使います。

まず、HTMLは以下のように親要素と子要素の入れ子にしてあげます。

HTML
<div class="parent">
<div class="child">コンテンツ</div>
</div>

CSSは以下のようになります。

CSS
.parent {
background: #00B285;
transform: skew(0deg, 10deg);
}
.child {
transform: skew(0deg, -10deg);
}

親要素を傾けて、そのままだと中のコンテンツも傾いてしまうので、子要素で傾きを水平に戻しています。

あとがき

実際にやってみると非常に簡単です。斜めになった背景画像を用意しても良いですが、色をつけるだけならCSSで簡単にできますので、ぜひチャレンジしてみてください。

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

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。