--- title: slug: Web/CSS/basic-shape tags: - CSS - CSS シェイプ - CSS データ型 - リファレンス translation_of: Web/CSS/basic-shape ---
{{CSSRef}}

CSS の <basic-shape> データ型は、 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。

{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}

構文

<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) としての割合になります。

引数 {{cssxref("<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> は多角形の内部を決めるために使用される塗りつぶし規則を表します。指定可能な値は nonzero と evenodd です。省略時の既定値は nonzero です。

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

path()
path( [<fill-rule>,]? <string>)

省略可能な <fill-rule> は、パスの内部を決めるために使用される塗りつぶし規則を表します。指定可能な値は nonzero と evenodd です。省略時の既定値は nonzero です。

必須の <string> は、引用符で囲まれた SVG Path です。

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

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

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

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

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

基本シェイプの計算値

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

基本シェイプの補間

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

例

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

この例では、 @keyframes @-規則を使用して、二つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  }

  to {
    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
  }
}

結果

{{EmbedLiveSample('Animated_polygon','340', '340')}}

仕様書

仕様書 状態 備考
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }} {{ Spec2('CSS Shapes') }} 初回定義

ブラウザーの対応

{{Compat("css.types.basic-shape")}}

関連情報