CSS ellipse() 関数

定義と使用方法

CSSの ellipse() 関数は x と y の2つの半径を持つ円を定義します。

ellipse() 関数は通常、 clip-path 属性と shape-outside 属性を組み合わせて使用します。

インスタンス

例 1

画像を x 半径が 50%、y 半径が 30% の円にカットします：

img {
  clip-path: ellipse(50% 30%);
}

実際に試してみる

例 2

画像を x 半径が 50%、y 半径が 30% の円にカットし、円の中心を右側に配置します：

img {
  clip-path: ellipse(50% 30% at right);
}

実際に試してみる

例 3

使用 clip-path および ellipse() アニメーション効果を実現する：

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

実際に試してみる

例 4

組み合わせて使用 ellipse()、clip-path および shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

実際に試してみる

CSS 文法

ellipse(xy-radius 位置)

技術的詳細

ブラウザのサポート

このテーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参考：CSS clip-path 属性

参考：CSS shape-outside 属性

参考：CSS circle() 関数

参考：CSS inset() 函数

参考：CSS polygon() 函数