CSSで要素を斜めにする方法

「直角は簡単にできるんだけど斜めってどうやるの？」

CSSを使って要素を斜めにする方法を解説します。

三角を重ねる

<style>
.example{
    background: #a9e5de;
    padding: 50px 15px 30px;
    width: 300px;
    box-sizing: border-box;
    position: relative;
}
.example::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid #fff;
    border-right: 150px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 150px solid #fff;
    position: absolute;
    left: 0;
    top: 0;
}
</style>
<div class="example">テキストテキストテキストテキストテキストテキストテキスト</div>

これは見た目は斜めにカットされたように見えますが、背景と同じ色をした直角三角形を四角に重ねている状態です。分解してみてみましょう。

三角の作り方

<style>
.example2::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid #ce7d7d;
    border-right: 150px solid #b45cc9;
    border-bottom: 20px solid #699ed4;
    border-left: 150px solid #e3b15f;
}
</style>
<div class="example2"></div>

三角はborderで表現します。

widthとheightが0で線の幅が大きくあるとき、その境界線は斜めになり線一つ一つは三角形になります。

これで上と左の線（三角）を同じ色にすると直角三角形になります。

四角に重ねる

<style>
.example3{
    background: #a9e5de;
    padding: 50px 15px 30px;
    width: 300px;
    box-sizing: border-box;
    position: relative;
}
.example3::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid #ce7d7d;
    border-right: 150px solid #b45cc9;
    border-bottom: 20px solid #699ed4;
    border-left: 150px solid #e3b15f;
    position: absolute;
    left: 0;
    top: 0;
}
</style>
<div class="example3">テキストテキストテキストテキストテキストテキストテキスト</div>

この三角（×4）を四角に重ねます。

position: absoluteを使って重ねましょう。

border-rightとborder-leftの幅の合計が四角の横幅になるように数値を調整します。

四角側にはpaddingで三角が乗るスペースを確保しましょう。

三角の色を変える

三角の上と左を白（背景色）に、右と下を透明（資格の色）にすれば完成です。

border-top: 20px solid #fff;
border-right: 150px solid transparent;
border-bottom: 20px solid transparent;
border-left: 150px solid #fff;

↓マウスを乗せると色が変わります。消えたように見えますが色が変わっただけです。

別要素を背景とし、傾ける

<style>
.example5{
    width: 300px;
    padding: 50px 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.example5::before{
    content: "";
    display: block;
    transform: rotate(10deg);
    background: #a9e5de;
    position: absolute;
    left: -10%;
    right: -10%;
    top: 0;
    bottom: 0;
    margin: 0;
    z-index: -1;
}
</style>
<div class="example5">テキストテキストテキストテキストテキストテキストテキスト</div>

背景色となっている要素をtransform: rotate(○○deg)で傾けています。

はみ出た部分はoverflow: hiddenでカットします。

overflow: hiddenで隠れた部分も見てみましょう。

斜めの背景色

<style>
.example6{
    width: 300px;
    padding: 50px 30px;
    margin: 50px 0 0 50px;
    position: relative;
    border: 1px solid #999;
    z-index: 1;
}
.example6::before{
    content: "";
    display: block;
    transform: rotate(10deg);
    background: #a9e5de;
    position: absolute;
    left: -10%;
    right: -10%;
    top: 0;
    bottom: 0;
    margin: 0;
    z-index: -1;
}
</style>
<div class="example6">テキストテキストテキストテキストテキストテキストテキスト</div>

背景色は本来の四角とは別のものを用意します。

これに背景色とtransform: rotate(○○deg)を指定します。

transform: rotate(○○deg)は要素を指定した角度だけ傾けるCSSです。

これを背景色として利用したいのでposition: absoluteで重ねます。

z-index: -1を指定するとpositionを指定していない要素である「テキスト」の後ろに移動できます。

left,right,top,bottomを0にすると親要素と同じ大きさ高さになります。

ただし、斜めにすると大きさが足りなくなるためマイナス値にしてもっと大きくしています。

あとは親要素にoverflow: hiddenを指定しはみ出た部分を隠せば完成です。

背景グラデーションを使う

<style>
.example7{
    padding: 50px 30px;
    background: linear-gradient(to right top, #a9e5de 80%,transparent 80%);
}
</style>
<div class="example7">テキストテキストテキストテキストテキストテキストテキスト</div>

背景色はグラデーションを指定できます。

2色を同じ位置に指定すると明確に分かれた色を指定できます。

また、グラデーションの向きも指定できます。

これを利用して斜めを表現できます。

背景色のグラデーションは角度指定もできますが、「右上へ」という指定ができます。

これにより四角の大きさが変わってもそれに応じて角度も変わらせることもできます。

遠近法を利用する

<style>
.example8{
    width: 200px;
    height: 100px;
    background: #a9e5de;
    margin: 50px;
    transform:perspective(200px) rotateY(60deg);
}
</style>
<div class="example8">テキストテキストテキストテキストテキスト</div>

遠近法を利用して大きさに変化をつけ、斜めを表現します。

ご覧の通り中にある文字まで斜めになるため、文字は使わず、アイコンとして使った方がいいですね。

transform:rotateY(60deg);でY軸を軸として傾けます。

これだけだと遠近感はつきません。

perspective(○○px)もセットで指定します。

左右を斜めにしたいときはtransform:rotateXを指定しましょう。

【まとめ】CSSで要素を斜めにする方法

三角を重ねる（頂点に合わせたいとき・背景色が単色のとき）

borderで三角を表現し、四角に重ねる

別要素を背景とし、傾ける（背景色が単色じゃないとき）

transform: rotate(○○deg)で傾け、はみ出た部分はoverflow: hiddenでカット

背景グラデーションを使う（角度を指定したくない、横幅に応じて変えたいとき）

background: linear-gradient(向き, 最初の色 位置,次の色 位置)

同じ位置を指定して色をはっきり分ける

遠近法を利用する（アイコンで利用）

transform:perspective(○○px) rotateY(○○deg);で角度と奥行きを指定

以上、CSSで要素を斜めにする方法でした。