CSSで背景(background-color)を斜めにする

投稿日：2019年1月27日更新日：2019年2月3日

本サイトの紹介ページのように、CSSだけで背景を斜めにします。

やりたいこと

以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なることで下辺が斜めになるような背景を作る。

HTMLとCSS

HTML

<div id="base-wrapper">
    <div id="base">これはid="base"のdivです。</div>
</div>

これはid="base"のdivです。

CSS（上のイメージではわかりやすさのためにoverflow: visible;にしています。）

#base-wrapper{
    margin: 0 auto;
    width: 500px;
    height: 300px;
    overflow: hidden;
}
#base{
    margin-top: 10px;
    width: 200px;
    height: 100px;
    background: #000;
    color: #fff;
    position: relative;
}
#base::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120%;
    height: 100%;
    background: #FDB148;
    transform-origin: right top;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
    z-index:-1;
}

#base-wrapper{

margin: 0 auto;

width: 500px;

height: 300px;

overflow: hidden;

}

#base{

margin-top: 10px;

width: 200px;

height: 100px;

background: #000;

color: #fff;

position: relative;

}

#base::after{

content: "";

position: absolute;

top: 0;

right: 0;

width: 120%;

height: 100%;

background: #FDB148;

transform-origin: right top;

-webkit-transform: rotate(-4deg);

-ms-transform: rotate(-4deg);

transform: rotate(-4deg);

z-index:-1;

}

ポイント

支点の位置(transform-origin)

支点の位置は、基本的にright/leftとtopを指定すればOK。三角形は斜辺が最も長くなるため、例のように下辺を斜めにしたい時でもtopを支点に回転させれば親オブジェクトの高さよりも斜辺が必ず長くなる。

左下がりor左上がり ··· 右上を支点(transform-origin: right top;)
右下がりor右上がり ··· 左上を支点(transform-origin: left top;

after擬似要素のheightと親オブジェクトのwidth

親要素のwidthが長くheightが場合には注意が必要。以下のように左側がafter擬似要素でカバーしきれなくなる。

このような場合には、支点をbottomにしてafter擬似要素のheightを大きくしてカバーする。

CSS

#base::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120%;
    height: 200%;
    background: #FDB148;
    transform-origin: right bottom;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
    z-index:-1;
}