セクション間の区切りが曲線になってるデザインはたまにありますが、意外とどうやっていいか分からない人も多いと思います。
今回は、CSSでセクション間の区切りを曲線にする方法を、サンプルを元に解説していきます。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
CSSでセクション背景の区切り(境界線)を曲線にする方法
それでは、早速サンプル(デモ)を見てみましょう。
See the Pen
CSSでコンテンツの区切りを曲線にする by junpei (@junpei-sugiyama)
on CodePen.
最初は下に丸みを帯びていて、スクロールすると上に丸みを帯びているエリアが出てきます。
また左上の『HTML・CSS』をクリックするとコードが書いてあり、同時に画面幅が狭くなっても曲線が崩れないのが分かります。
HTMLのコード
HTMLの書き方はこちら。
<div class="wrap">
<div class="content01"></div>
</div>
<div class="wrap">
<div class="content02"></div>
</div>
<div class="wrap">
<div class="content03"></div>
</div>
特に解説はいらないかと思いますが、.content01
が下に曲線、.content03
が上に曲線となります。
CSSのコード
CSSの書き方はこちら。
wrap {
overflow: hidden;
}
.content01 {
background: #1CB4D3;
border-bottom-left-radius: 1000px 200px;
border-bottom-right-radius: 1000px 200px;
height: 200px;
margin-left: -100px;
margin-right: -100px;
padding-left: 100px;
padding-right: 100px;
}
.content02 {
height: 100px;
}
.content03 {
background: #1CB4D3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
height: 200px;
margin-left: -100px;
margin-right: -100px;
padding-left: 100px;
padding-right: 100px;
}
height
は高さを出すために書いたもので、コンテンツがあれば不要です(今回はコンテンツがないので、height
がないと表示されない)。
そして、今回のポイントとなるCSSのプロパティはこちらです。
border-top-left-radius | 左上の角丸を指定 |
border-top-right-radius | 右上の角丸を指定 |
border-bottom-left-radius | 左下の角丸を指定 |
border-bottom-right-radius | 右下の角丸を指定 |
- border-top-left-radius と border-top-right-radius が上を曲線にしたい時
- border-bottom-left-radius と border-bottom-right-radius が下を曲線にしたい時に使用します。
なので、『border-top-left-radius と border-bottom-left-radius』といった組み合わせは、基本的に使わないかと思います。
そして、このプロパティには2つの数値を指定します。
border-top-left-radius: 水平方向の半径 垂直方向の半径;
この半径は、『長さ』か『パーセント』で指定出来ます。
先ほどのサンプルでは、最初は『px』で指定、下の方は『パーセント』で指定しています。
ちょっと違いが分かりにくいですが、カーブの形が違います。
それぞれ数値を変えるとカーブも変わってくるので、デザインカンプに合うように調整してみましょう。
セクションを囲って『overflow: hidden;』をしないと横スクロールしてしまう
もし、セクションを囲わないとどうなるか見てみます。
See the Pen
CSSでコンテンツの区切りを曲線にする(全体を囲わない場合) by junpei (@junpei-sugiyama)
on CodePen.
HTMLは、セクションを囲っていた.wrap
が無い状態です。
<div class="content01"></div>
<div class="content02"></div>
<div class="content03"></div>
一見問題なさそうですが、横にスクロールしてしまっています。
これを回避するために、セクションを囲った要素に対してoverflow: hidden;
を記載しています。
ネガティブマージンを指定
あとは、margin
の意味がちょっと分かりにくいと思うので、margin
がないとどうなるか見てみます。
See the Pen
CSSでコンテンツの区切りを曲線にする(marginなし) by junpei (@junpei-sugiyama)
on CodePen.
左右が丸まってしまいました。
これを回避するために、ネガティブマージンを指定します(マイナス方向のmargin
)。
このmargin
は、数値が大きいほど丸くならずに真っ直ぐになっていきます(マイナス方向に大きいという意味)。
また、margin
と同じ数値のpadding
を指定しないと、コンテンツも左右に飛び出てしまうので、margin
でマイナスした分をpadding
で相殺します。
まとめ
今回は、セクション背景の区切り(境界線)を曲線にする方法を解説しました。
実務でもたまにある実装なので、CSSで実装できるようにしておくと便利かと思います。
以上になります。
【CSS】三角形を使って背景を斜めに区切る方法【レスポンシブ対応サンプル付き】
続きを見る