ミギムキ

[CSS] 斜めに角度をつけた背景色を設定したい

背景色をつけるとき、少し角度をつけるとほどよいアクセントになります。

一見ややこしそうな背景色も、transformプロパティのskewYを使うことでカンタンに実現できます。

サンプルコード

<section class="bg_diagonal"> </section> .bg_diagonal { position: relative; } .bg_diagonal::before { position: absolute; top: 0px; left: calc(-50vw + 50%); right: calc(-50vw + 50%); bottom: 0px; z-index: -1; transform: skewY(4deg); background-color: #F0F8FF; content: ""; }

before疑似要素に画面幅いっぱいの背景色をつけ、要素全体を「transform: skewY(4deg);」で傾きをつけることで、右斜の角度をつけた背景色にしています。

transform: skewY(-4deg);

左斜めの角度をつけたい場合は負数で「transform: skewY(-4deg);」と設定することで傾く方向を変えることできます。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。