ellipse()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
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%;
}
構文
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 |
ブラウザーの互換性
Loading…
関連情報
- このデータ型を使用するプロパティ:
clip-path,shape-outside - 基本シェイプのガイド