ellipse()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

ellipse() は CSS の関数で、<basic-shape> データ型の一つです。

試してみましょう

clip-path: ellipse(20px 50px);

clip-path: ellipse(4rem 50% at right center);

clip-path: ellipse(closest-side closest-side at 5rem 6rem);

clip-path: ellipse(closest-side farthest-side);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #fe9;
}

#example-element {
  background: linear-gradient(to bottom right, #f52, #05f);
  width: 100%;
  height: 100%;
}

構文

css

shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

楕円は基本的に円を潰したものなので、 ellipse() は、2 つの半径 x と y を指定しなければならないことを除けば、 circle() とよく似た方法で動作します。

値

<shape-radius>

2 つの半径で、x および y をその順で指定します。<length>、<percentage>、または closest-side および farthest-side の値の何れかです。

closest-side: シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。
farthest-side: シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。

<position>

円の中心を移動します。<length>、<percentage>、または left のような値の何れかです。

例

基本的な ellipse() の例

この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。

closest-side / farthest-side の値の使用

キーワード値の closest-side と farthest-side は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。

仕様書

Specification
CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse

ブラウザーの互換性

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.