CSSのみで要素の区切りを曲線(円弧)にする方法

CSSのみで以下のような円形の区切りを作る方法をご紹介いたします。

以前であれば、画像を設置する方法が一般的でしたが、CSSだけで実現することが可能になりました。

CSSで要素の区切りを曲線(円弧)にする方法

HTMLは以下のように記述します。

<div class="wrapper">
  <div class="arc">
    ～コンテンツ～
  </div>
</div>

シンプルですね。

CSSは以下のようにします。

.wrapper {
  overflow: hidden;
}

.arc{
  min-height: 400px;
  border-bottom-right-radius: 1000px 200px;
  border-bottom-left-radius: 1000px 200px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  background: #2ECCFA;
}

backgroundで背景色は変更してください。

カーブの傾き加減は、border-bottom-right-radiusとborder-bottom-left-radiusの値で調整します。

なお、ネガティブマージンを指定していますが、これがないと両端に丸みが出過ぎてしまいます。全体を囲っている.wrapperにoverflow:hidden;を指定し、ネガティブマージンを指定することで、カーブを滑らかにしています。

あとがき

結構簡単に実現できますね。曲線の区切りや背景を実装したい時は、ぜひ参考にしていただければと思います。

ちなみに、区切りを斜めに分割したい時は、「CSSだけで斜めの背景を実現する方法」をご参照ください。