ellipse() の数値は何を表す？

ellipse(横半径縦半径 at 中心X 中心Y) です。例の ellipse(50% 35% at 50% 50%) は、横は要素いっぱい・縦は35%の半径で、中心は要素の真ん中という意味です。

円との使い分けは？

正円で切るなら circle()、横長・縦長で切るなら ellipse() が向きます。横長のバナーやワイドなアバター枠は楕円が便利です。

CSS 楕円で切り抜く方法｜clip-path ellipseで横長・縦長トリミング（コピペ）

Q: ellipse() の数値は何を表す？

ellipse(横半径 縦半径 at 中心X 中心Y) です。例の ellipse(50% 35% at 50% 50%) は、横は要素いっぱい・縦は35%の半径で、中心は要素の真ん中という意味です。

楕円で切り抜くには clip-path: ellipse(50% 35% at 50% 50%) を指定します。ellipse(横半径縦半径 at 中心) の形で、横長アバターやワイドなサムネイルのトリミングに使えます。img にも背景画像にも効きます。下にコピペ用コードを用意しました。

横長の楕円

CSS

.ellipse-wide {
  clip-path: ellipse(50% 35% at 50% 50%);
  -webkit-clip-path: ellipse(50% 35% at 50% 50%);
}

縦長の楕円

CSS

.ellipse-tall {
  clip-path: ellipse(40% 50% at 50% 50%);
  -webkit-clip-path: ellipse(40% 50% at 50% 50%);
}

ポイントと注意点

半径の意味：1つ目が横半径、2つ目が縦半径です。両方50%にすると要素いっぱいの楕円になります。
中身を歪ませない：画像は object-fit: cover を併用すると、切り抜いても中身が引き伸ばされません。
中心の移動：at 50% 50% を変えると楕円の中心が動きます。微調整は clip-path ジェネレーターの「楕円」タイプが便利です。

横長の楕円

CSS

縦長の楕円

CSS

ポイントと注意点

関連