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

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

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

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

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

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

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

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

CSSでセクション背景の区切りを曲線にする方法

それでは早速サンプルを見てみましょう。

See the Pen
CSSでコンテンツの区切りを曲線にする by junpei (@junpei-sugiyama)
on CodePen.

最初は下に丸みを帯びていて、スクロールすると上に丸みを帯びているエリアが出てきます。

また左上の『HTML・CSS』をクリックするとコードが書いてあり、同時に画面幅が狭くなっても曲線が崩れないのが分かります。

コード解説

まずは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です。

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-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）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！