セクション間の区切りを斜めにするというデザインは結構あります。
今回はその方法について解説していきます。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
CSSで三角形を使って背景を斜めに区切る方法(border使用)
まず斜めの部分をどう表現するかというと、borderを使います。
border
と言えば枠線に対して使うイメージがあると思いますが、三角形を作りたい時にも使います。
この三角形の部分を斜めとして使います。
ちなみにborderを使って三角形を作る原理は以下の記事で解説しています。
CSSで三角形を作る2つの方法(clip-path、border使用)
続きを見る
右上がりの斜め区切り
まずは右上がりの斜め区切りを見てみましょう。
See the Pen
斜め区切り(セクション間1) by junpei (@junpei-sugiyama)
on CodePen.
左上の『HTML・CSS』をクリックするとコードが書いてあり、同時に画面幅が狭くなっても斜めの区切りが崩れないのが分かります。
ここで斜めに関する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%となるので、ここがレスポンシブになります(左上のHTMLかCSSをクリックすると分かります)
試しに上の透明部分を緑に、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;
}
この順番が直感的には分かりにくいですね。。。
今回はセクション間の斜め区切りについて書きましたが、同じようにセクション内で斜めにする事も出来ます。
まとめ
今回は三角形を使って背景を斜めに区切る方法を解説しました。
これはセクション間の区切りでよくある実装なので、覚えておきましょう。
以上になります。
CSSで三角形を作る2つの方法(clip-path、border使用)
続きを見る
【CSS】セクション背景の区切りを曲線にする方法【レスポンシブ対応サンプル付き】
続きを見る