【CSS】背景だけ斜めにする

Tweet

Category css 2015/12/13

問題

スタイルシートで、背景だけ斜めにできますか？

斜めに2色で区切ったりできますか？

答え

スタイルシートで回転させたりゆがめたりは可能。

transform の skew や rotate を使う。

要素全体を10度ゆがめると以下のようになる。

<div style="border:1px solid #000; width:300px; overflow:hidden;">
    <div style="padding:100px 50px; transform:skew(0deg, -10deg); background:#00c; color:#fff;">テキストテキストテキスト</div>
    <div style="padding:100px 50px;">テキストテキストテキスト</div>
</div>

中身はゆがめたくないので、中身だけ逆向きにゆがめて元に戻す。

<div style="border:1px solid #000; width:300px; overflow:hidden;">
    <div style="padding:100px 50px; transform:skew(0deg, -10deg); background:#00c; color:#fff;">
        <div style="transform:skew(0deg, 10deg);">テキストテキストテキスト</div>
    </div>
    <div style="padding:100px 50px;">テキストテキストテキスト</div>
</div>

上に斜めに背景が見えるのを防ぐには、マイナスのマージンで上に移動してもらえばOK。

<div style="border:1px solid #000; width:300px; overflow:hidden;">
    <div style="margin-top:-50px; padding:100px 50px; transform:skew(0deg, -10deg); background:#00c; color:#fff;">
        <div style="transform:skew(0deg, 10deg);">テキストテキストテキスト</div>
    </div>
    <div style="padding:100px 50px;">テキストテキストテキスト</div>
</div>

あとは画面の幅や傾きに応じて調整すること。

背景に画像を使えば、背景画像だけ傾けたり、任意の角度の縞模様の背景が作れたりする。