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

公開日:2023/06/17

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

一見ややこしそうな背景色も、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です。