オシャレなサイトが増えている現代、CSSで背景付きの斜めの要素を作りたいという人がいると思います。
この記事を読めば、その作り方を学ぶことができます。
CSSで背景付きの斜めの要素を作る方法
まずはデモを見てください。
See the Pen
mYOmpa by MakotoHoshi (@makotohoshi)
on CodePen.
基本的にはコピペで問題ないですが、解説すると、
.skew_box・・・transform: skewで要素の上下の辺を斜めにする
.bg_box・・・背景を指定し、.skew_boxを基準にposition: absoluteで中心に設定する
です。
.skew_boxからはみ出した部分は、overflow: hiddenでカットしています。
下の辺だけ逆の傾斜をつけたい場合
デモはこんな感じ。
See the Pen
CSSで背景付きの斜めの要素を作る方法２ by MakotoHoshi (@makotohoshi)
on CodePen.
下にある要素をmargin-top:-90pxで上にずらすだけです。
おわりに
これで斜めにスライスした画像を使ったりしなくても、CSSだけで斜めの要素を作ることができます。今まで斜め要素の作り方に悩んでいた人はぜひ試してみてください！
