【CSS】要素をなめらかな曲線で区切る方法

セクションを曲線で区切る際、border-radiusだけで設定してしまうと急な曲線となって見栄えが良くない感じがします。では、これをなめらかな曲線にするにはどうすれば良いのでしょうか。

実現したいこと

• 要素をなめらかな曲線で区切る

方法

親要素にoverflow: hidden;を設定して、子要素で左右にネガティブマージンを設定した上でborder-radiusで曲線をすればOKです。

コード例

.wrap {
overflow: hidden;
}
.arc {
min-height: 300px;
border-bottom-right-radius: 2000px 300px;
border-bottom-left-radius: 2000px 300px;
margin-left: -200px;
margin-right: -200px;
padding-left: 200px;
padding-right: 200px;
}

クラス名や数字をいじる程度で書き方は変わらないなと思い、参考記事のコードをそのまま載せさせていただきました。参考記事では画像を用いて説明してくれています。

引用元：コンテンツの区切りを円弧で表現するCSS｜のんびりデザインしているような。

まとめ

どの程度の曲線にするかは少しセンスが問われそうですが、これで良い感じの曲線を設定できそうですね。

参考：コンテンツの区切りを円弧で表現するCSS