CSS<basic-shape> データ型は、 clip-path または shape-outside プロパティで使用される図形を表します。

構文

<basic-shape> データ型は、以下に挙げた基本図形関数のうちの一つで定義します。

図形を作成するときは、 <basic-shape> の値を使用するそれぞれのプロパティで参照ボックスを定義します。図形の座標系は参照ボックスの左上隅が原点で、 X 座標が右方向、 Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。

図形関数

以下の図形に対応しています。 <basic-shape> 値はすべて関数表記であり、 値定義構文で定義されます。

inset()
inset( <shape-arg>{1,4} [round <border-radius>]? )

内部の長方形を定義します。

最初の4つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定プロパティの構文に従い、1つ、2つ、4つの値で全四辺を設定することができます。

<border-radius> の引数は省略可能で、 border-radius 一括指定プロパティの構文を使用して、内部の矩形の角の丸みを定義します。

内部の矩形で2つの距離の組み合わせが、その軸の長さを超えていた場合(たとえば左右の距離がそれぞれ75%に設定された場合など)は、何も領域を囲まない図形を定義します。この仕様書によれば、これは空のフロート領域を生成します。

circle()
circle( [<shape-radius>]? [at <position>]? )

引数 <shape-radius>r、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して sqrt(width^2+height^2)/sqrt(2) としての割合になります。

引数 <position> は円の中心を定義します。省略時は既定で中央になります。

ellipse()
ellipse( [<shape-radius>{2}]? [at <position>]? )

引数 <shape-radius> は、 rx と ry、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅(rx 値の場合)と高さ(ry 値の場合)に対する割合になります。

引数 position は楕円の中心を定義します。省略時は既定で中央になります。

polygon()
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<fill-rule> は多角形内部の塗りつぶし規則を決めるのに使用します。指定可能な値は nonzeroevenodd です。省略時の既定値は nonzero です。

それぞれの shape-arg の組における引数 xiyi は、多角形の i 番目の頂点の座標を表します。

上記で定義されていない引数は、以下のように定義されています。

<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

円や楕円の半径を定義します。省略時の既定値は closest-side です。

closest-side は図形の中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。

farthest-side は図形の中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。

基本図形の計算値

<basic-shape> 関数での値は以下の例外を除けば、規定通りに計算されます。

  • 省略された値は既定値として含められ計算されます。
  • circle() または ellipse() における <position> 値は、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした(水平と垂直)オフセットの組として計算されます。
  • inset() での <border-radius> 値は全8つの <length> またはパーセント値の展開リストとして計算されます。

基本図形の補間

 ある <basic-shape> と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。図形関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば <length><percentage>calc() として補間されます。リストの値がこれらの型以外で同じであれば(両方のリストの同じ位置に nonzero があった場合など)、それらの値は補間が行われます。

  • どちらの図形も同じ参照ボックスを使う必要があります。
  • 両方の図形が同じ型で、型が ellipse() または circle() で、半径に closest-side または farthest-side のキーワードが使われていない場合、図形関数のそれぞれの値の間で補間が行われます。
  • 両方の図形の型が inset() の場合、図形関数のそれぞれの値の間で補間が行われます。
  • 両方の図形の型が polygon() で、両方の多角形が同じ数の角を持っており、同じ <fill-rule> を使用している場合、図形関数のそれぞれの値の間で補間が行われます。
  • それ以外の場合は補間が行われません。

アニメーションする多角形

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: linear-gradient(red, blue);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: 5s poly infinite alternate ease-in-out;
  margin: 1em auto;
  display: block;
}

@keyframes poly {
  from {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  to {
    -webkit-clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
    clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
  }
}

結果

仕様策定状況

仕様書 策定状況 コメント
CSS Shapes Module Level 1
<basic-shape> の定義
勧告候補 初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり ?47 なし あり あり -webkit-
inset() ? ? なし なし なし ?
Animation あり ?49 なし あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり ?47 なし あり あり
inset() ? あり ? なし なし ? あり
Animation ? ? ?49 なし ? ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09
 最終更新者: mfuji09,