CSS Reference

ellipse()

CSS で楕円を描く

ellipse() 関数は、基本シェイプ関数と呼ばれる CSS 関数で、CSS を利用して楕円を描くことに利用できます。

基本シェイプ関数の値となる <basic-shape> データ型は、clip-path、shape-outside、offset-path の各プロパティで使用されます。

ellipse() 関数をはじめ、基本シェイプ関数には下記のようなものが挙げられます。

これらの CSS 関数を使って、CSS で図形を簡単に定義することが可能です。

詳細説明

ellipse() 関数の基本的な構文は下記のようになります。

  1. <ellipse()> = ellipse(
  2.   <radial-size>?
  3.   [ at <position> ]?
  4. )

<radial-size>

<radial-size> は下記のように定義されています。

  1. <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}

つまり、<length> もしくは <percentage> 値、あるいは <radial-extent> が指定可能となります。

<radial-extent> は、下記のいずれかのキーワードになります。

closest-side シェイプの中心に最も近い、参照ボックスの辺と正確に一致するようにサイズが設定されます。シェイプが楕円の場合、x,y 軸で最も近い辺が選択されます。
farthest-side シェイプの中心に最も遠い、参照ボックスの辺と正確に一致するようにサイズが設定されます。シェイプが楕円の場合、x,y 軸で最も遠い辺が選択されます。
closest-corner 参照ボックスの中心に最も近い角を通過するようにサイズが設定されます。シェイプが楕円の場合、最終的な形状は closest-side が指定された場合と同じアスペクト比を持ちます。
farthest-corner 参照ボックスの中心に最も遠い角を通過するようにサイズが設定されます。シェイプが楕円の場合、最終的な形状は farthest-side が指定された場合と同じアスペクト比を持ちます。

<position>

<position> は background-position プロパティでも使用される、位置を表すキーワード、もしくは <length>、<percentage> 値が指定できます。

指定可能なキーワードとしては、left、center、right、top、bottom などで、省略された場合は center として扱われます。

<position> を指定する場合は、at を <radial-size> の指定との間に記述します。

ellipse()のサンプルソース

  1. .example01 {
  2.   clip-path: ellipse(20px 50px);
  3.   background: linear-gradient(to bottom right,#f52,#05f);
  4.   width: 100%;
  5.   height: 100%;
  6. }
  1. .example02 {
  2.   clip-path: ellipse(4rem 50% at right center);
  3.   background: linear-gradient(to bottom right,#f52,#05f);
  4.   width: 100%;
  5.   height: 100%;
  6. }
  1. .example03 {
  2.   clip-path: ellipse(closest-side closest-side at 5rem 6rem);
  3.   background: linear-gradient(to bottom right,#f52,#05f);
  4.   width: 100%;
  5.   height: 100%;
  6. }
  1. img {
  2.   shape-outside: ellipse(40% 50% at left);
  3.   float: left;
  4.   margin: 20px;
  5. }

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome