コピペでできる斜め背景【CSS】
公開日：こんにちは、ゆきまるです。
CSSで斜め背景を実現する方法はいくつかあり、出来なくはないです。
しかし、残念な点があり、「どれも癖があって難しそう。」ということ。
ということで、今回はコピペでできる斜め背景をご紹介します。
斜め背景のデモンストレーション
今回、transform: skew()を使って斜め背景を作っていきます。
他に、borderやlinear-gradientを使う方法もありますが、
linear-gradientはギザギザになる問題、borderは幅や高さがわかっていないといけないという問題があります。
その点、transform: skewは使いやすいと思うので、今回これを使っていきます。
以下はデモです。
See the Pen mdyBOBN by ゆきまる (@yukimaru-org) on CodePen.
斜め背景を作るための3ステップ
- Aのコードを斜め背景を付けたい要素にコピペ
- Bのコードを斜め背景を付けたい要素の
::beforeにコピペ - Bのコードに必要な値を入力
Aのコード
斜め背景を付けたい要素に以下のコードを追加してください。
position: relative;
z-index: 0;斜め背景を付けたい要素のpositionが、static以外でもとから指定されている場合は、1行目のposition: relativeは不要です。
さらに、z-indexがもとから指定されている場合は、2行目のz-index: 0も不要です。
Bのコード
斜め背景を付けたい要素の::beforeに以下のコードを追加してください。
（::beforeを既に使っている場合は、::afterでも大丈夫です。::beforeも::afterも既にどちらも使っている場合は安らかに眠ってください。）
content: '';
display: block;
position: absolute;
top: 30%;
right: 0;
bottom: 30%;
left: 0;
background-color: #816541;
transform: skewY(30deg);
z-index: -1;色々なパターンにカスタマイズする方法
上で示したのは一例で、ひとえに斜め背景といっても色々なパターンがあるでしょう。
横線を傾けるパターン
上記の例と同じようなパターンです。以下のCSSを自由に変更してください。
- topの値
- bottomの値
- background-colorの値
- transform: skewY()の角度
topとbottomを作りたいレイアウトに合わせて指定しましょう。指定した値が、端からの距離になります。
topやbottomには親要素の高さを基準とした%指定ができるのでオススメ。
transform: skew()で傾けた分だけ後からずれるので注意！
transform-originで基準を変えれば高度なレイアウトができます。興味があれば調べてみてください。初期値は上下左右真ん中になっています。
縦線を傾けるパターン
今度は、横線ではなく、縦線を斜めにするパターンです。
See the Pen bg-skew vertical by ゆきまる (@yukimaru-org) on CodePen.
Bのコードだけ変更になります。
content: '';
display: block;
position: absolute;
top: 0;
right: 30%;
bottom: 0;
left: 30%;
background-color: #816541;
transform: skewX(10deg);
z-index: -1;また以下のCSSをレイアウトに合わせてカスタマイズして下さい。
- right
- left
- background-color
- transform: skewX()の角度
先ほどとは違い、topとbottomは0にして、rightとleftを変更してください。
また、transform: skewX()に変更です！Yじゃないので注意！
片側が端に重なるパターン
以下のようなレイアウトも対応できます。
See the Pen bg-skew hidden by ゆきまる (@yukimaru-org) on CodePen.
このような場合、右下からはみ出しているのを隠すために、
Aのコードにoverflow: hiddenを追加してください。
そしてBのコードにtransform-originを指定します。
transformの変化を起こす基準を変えることができます。
今回は右下にググっと突き出しているので、左下を基準としています。
そうすることで、下に変な余白ができずにぴったりにすることができます。
まとめ
一度にたくさん覚えるのは大変なので、とりあえずコピペして後から少しずつ理解していくのもありかも。
