セクション間の区切りを斜めにするというデザインは結構あります。
今回はその方法について書いていきたいと思います。
効率よくコーディングしたい人はこちら
CSSで背景を斜めに区切るデザインにする方法とは
まず斜めの部分をどうするかというと、borderを使います。
borderと言えば枠線に対して使うイメージがあると思いますが、三角形を作りたい時にも使います。
この三角形の部分を斜めとして使います。
ちなみにborderを使って三角形を作る原理は以下の記事で解説しています。
右上がりの斜め区切り
まずは右上がりの斜め区切りを見てみましょう（コードを見るには左上のHTML、CSSをクリックして下さい）
See the Pen
斜め区切り（セクション間1） by junpei (@junpei-sugiyama)
on CodePen.
ここで斜めに関するcssは以下になります。
.section1::before {
border-color: transparent #1cb4d3 transparent transparent;
border-style: solid;
border-width: 50px 100vw 0 0;
bottom: 0;
content: "";
height: 0;
position: absolute;
}特にポイントになるのは border-color と border-width になります。
まずは border-color ですが、4つの色が設定されており、順番に上右下左の色となります。
この順番は margin や padding と同じですね。
そして border-width は上右下左に対しての長さになるので、ここでは下と左は0なので色を設定しても何も表示されません（ここでは transparent で透明にしています）
ここで設定されているのは上に50pxと左に画面幅100%である100vwとなります。
この100vwは画面幅に対して100%となるので、ここがレスポンシブになります。
試しに上の透明部分を緑に、100vwの色をピンクに変えてみるとこうなります。
See the Pen
斜め区切り（セクション間2） by junpei (@junpei-sugiyama)
on CodePen.
この緑の部分を透明にして、ピンクの部分を次のセクションと同じ色にする事で斜めの区切りを表現しています。
左上がりの斜め区切り
それでは次は左上がりの斜め区切りの方法です。
See the Pen
斜め区切り（セクション間3） by junpei (@junpei-sugiyama)
on CodePen.
右上がりとの違いは以下になります。
/* 右上がり */
.section1::before {
border-color: transparent #1cb4d3 transparent transparent;
border-width: 50px 100vw 0 0;
}
/* 左上がり */
.section1::before {
border-color: transparent transparent transparent #1cb4d3;
border-width: 50px 0 0 100vw;
}この順番が直感的には分かりにくいですね。。。
今回はセクション間の斜め区切りについて書きましたが、同じようにセクション内で斜めにする事も出来ます。
以上です。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
