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

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

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

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

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

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。※ 4月15日に値上げ予定

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

800部以上販売し、レビューは430件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら