Web制作 CSS

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

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

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

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

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

コーディングの時給アップにはこちら!


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-radiusborder-top-right-radiusが上を曲線にしたい時
border-bottom-left-radiusborder-bottom-right-radiusが下を曲線にしたい時に使用します。

なので『border-top-left-radiusborder-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】三角形を使って背景を斜めに区切る方法【レスポンシブ対応サンプル付き】

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

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


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS