【CSS】セクション背景の区切りを曲線にする方法【レスポンシブ対応サンプル付き】

セクション間の区切り（境界線）を曲線にしたいけどどうやるの？

セクション間の区切りが曲線になってるデザインはたまにありますが、意外とどうやっていいか分からない人も多いと思います。

今回は、CSSでセクション間の区切りを曲線にする方法を、サンプルを元に解説していきます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 完全無料
• 30日間でWeb制作を学べる
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 毎日人数制限ありの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

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-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で実装できるようにしておくと便利かと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！