【CSS】セクションの区切りを曲線にする方法

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

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

今回はCSSでセクション間の区切りを曲線にする方法をご紹介していきます。

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

それでは早速デモを見てみましょう。

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

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

コード解説

まずは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>

特に解説はいらないかと思います。

次は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で相殺します。

以上になります。