【解説】CSSでセクション区切りの背景を曲線にする【おしゃれな波線】

記事内に広告を含みます

パソ君

・セクション区切りをCSSを使って曲線で反映するにはどうやるの？

こんな疑問にお答えします。

よくセクション区切りが曲線になっているサイトがありますよね。

こんな感じの↓

これどうやってCSSで表現するんだ？って思うはず。

ただ実際やり方さえわかれば簡単。

ジト

すぐにできるよ！

ということで、この記事では「CSSでセクション区切りの背景を曲線にする方法」について解説していきます！

この記事でわかること

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

【解説】CSSでセクション区切りの背景を曲線にする【サンプル】
CSSでセクション区切りの背景を曲線にする【コード解説】
CSSでセクション区切りの背景を曲線・波線にするジェネレーター
- 使い方
【解説】CSSでセクション区切りの背景を曲線にする【おしゃれな波線】：まとめ

【解説】CSSでセクション区切りの背景を曲線にする【サンプル】

結論としては「border-radiusを活用する」ですね。

これでセクション区切りの背景を曲線にすることができます。

まず下記のサンプル表示と、コードを見てください。

See the Pen CSSでセクション区切りの背景を曲線に by jito-coder (@jito-coder) on CodePen.

<div class="container">
  <div class="box01"></div>
</div>
<div class="container">
  <div class="box02"></div>
</div>
<div class="container">
  <div class="box03"></div>
</div>

.container {
  overflow: hidden;
}

.box01 {
  color: #fff;
  background: #000066;
  border-bottom-left-radius: 800px 200px;
  border-bottom-right-radius: 800px 200px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 200px;
}

.box02 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.box03 {
  background: #000066;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 200px;
}

CSSでセクション区切りの背景を曲線にする【コード解説】

今回のCSSで作成された曲線のコードは、下記が重要な点となっています。

border-radiusを活用
大枠をoverflow: hidden;する
マイナスmarginを使い左右を隠す
paddingをつかってコンテンツ位置を調整

順に解説していきますね。

CSS曲線作成①：border-radiusを活用

まずこれ。これが一番重要。

border-radiusを使って、背景に丸みをつけ曲線を表示しています。

実際に使ったコードがこちら

.box01 {
  ~~
  border-bottom-left-radius: 800px 200px;
  border-bottom-right-radius: 800px 200px;
  ~~
}

.box03 {
  ~~
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  ~~
}

「border-bottom-〇〇」と「border-top-〇〇」を使用して、下部分もしくは上部分に丸みをつけています。

詳細を表にしました。

border-bottom-left-radius	左下の角丸
border-bottom-right-radius	右下の角丸
border-top-left-radius	左上の角丸
border-top-right-radius	右上の角丸

「border-bottom-left-radius: 800px 200px;」＝横800px 縦200pxの半径を左下に作成するということ。

「border-top-left-radius: 50%;」＝要素からした横50％縦50％の半径を左上に作成するということ。

上記で表した数値が、今回の曲線を作成しています。

ちなみに・・

半径の数値は「px」もしくは「％」で反映できます。

どちらで表示するかで曲線カーブの形が少し変わってくるのが特徴。これに関してはサイト案件のデザインによって変えるのが良いでしょう。

CSS曲線作成②：大枠をoverflow: hidden;する

次に重要な点が、大枠をoverflow: hidden;を使って囲むこと。

理由は横スクロールを発生させないため。

試しにoverflow: hidden;を使ってない、サンプルがこちら↓

See the Pen CSSでセクション区切りの背景を曲線に（overflowなし） by jito-coder (@jito-coder) on CodePen.

横にスクロールできる状態になってますよね。。

下記のように大枠を囲っておらず、overflow: hidden;が効いていないため。

<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>

border-bottom-left-radius: 800px 200px;で半径の数値を大きく指定しているので、横幅が伸びるてしまいます。

その伸びた横幅のスクロールを発生させないためにも、大枠を作成してoverflow: hidden;を指定するのが重要となりますね。

CSS曲線作成③：マイナスmarginを使い左右を隠す

3つ目の重要な点が、マイナスmarginを使うこと。

これもサンプルを見たらわかりやすいかと。

See the Pen CSSでセクション区切りの背景を曲線に（marginなし） by jito-coder (@jito-coder) on CodePen.

左右の丸みが強くなってますよね。こうなると見栄え的にはよくありません。
もちろんデザインがこれならOKですが。

これをなくすためにもマイナスmarginを使います。

.box01 {
  ~~
  margin-left: -100px;
  margin-right: -100px;
  ~~
}

.box03 {
  ~~
  margin-left: -100px;
  margin-right: -100px;
  ~~
}

上記のようにして、左右に100pxずつ背景を伸ばしてるような感じ。

これで丸みが強くなった部分を隠しています。

CSS曲線作成④：paddingをつかってコンテンツ位置を調整

最後に重要な点がpaddingを使うこと。

使う理由としては、コンテンツ位置を調整するためですね。

というのも③のマイナスmarginで横に背景が伸びています。つまりその分、中に入る要素の位置も横にずれるということ。

そのずれを元にもどすためにも、paddingを使うんです。

下記の数値を見てください。

.box01 {
  ~~
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  ~~
}

.box03 {
  ~~
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  ~~
}

paddingとマイナスmarginの指定数値が一緒ですよね。

つまりこれでずれを解消しているのがわかるはず。そのためpaddingを使うのが最後の重要な点です。