[CSS] border-radiusよりシャープにできるclip-path

画像の上、又は下にカーブを付けたのですが、border-radiusでは角が若干丸くなってしまいました。角はパッツんとしたいので、調査。他も手法はある様ですが、htmlを書き足す事なく、CSSで済ませたかったので、clip-pathを使う事にしました。今回の例は、蒲鉾を逆さにした形です。

clip-pathってかなり便利かも！蒲鉾型にかかわらず、星形など自由度が高いと思います。最後に便利なジェネレーターもご紹介します。

border-radiusを使った場合

.your-image-class {
border-radius: 0% 0% 65% 65% / 0% 0% 8% 8%;
}

なんとなく角の方が丸くなってしまいます。右にはスクロールバーが写っている為、そんなに気にならないと思いますが、左端を見ると良く分かると思います。

clip-pathを使った場合

border-radiusでは限界がある様なので、clip-pathを使いました。

.your-image-class {
  clip-path: ellipse(120% 100% at 50% 0%);
}

大な円（例として120%）を書いて、角の丸くなっている部分を場外へ出してしまう事で角がシャープに見せます。

カーブを浅くするには

/* 少しだけ浅く */
clip-path: ellipse(150% 100% at 50% 0%);

/* もう少し浅く */
clip-path: ellipse(200% 100% at 50% 0%);

/* かなり浅く */
clip-path: ellipse(300% 100% at 50% 0%);

clip-pathの詳しい使い方

デザインの幅が広がりますね。