CSS シェイプ関係の文書を更新

- 2021/10/09 時点の英語版に同期

5 files changed, 333 insertions, 100 deletions

diff --git a/files/ja/web/css/basic-shape/circle()/index.md b/files/ja/web/css/basic-shape/circle()/index.md
new file mode 100644
index 0000000000..5c1b236415
--- /dev/null
+++ b/files/ja/web/css/basic-shape/circle()/index.md
@@ -0,0 +1,59 @@
+---
+title: circle()
+slug: Web/CSS/basic-shape/circle()
+tags:
+  - CSS
+  - CSS データ型
+  - CSS シェイプ
+  - circle
+  - CSS 関数
+  - データ型
+  - Reference
+browser-compat: css.types.basic-shape.circle
+translation_of: Web/CSS/basic-shape/circle()
+---
+{{CSSRef}}
+
+**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。
+
+## 構文
+
+```css
+shape-outside: circle(50%);
+clip-path: circle(6rem at 12rem 8rem);
+```
+
+### 値
+
+- `<shape-radius>`
+
+  - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。
+
+    - `closest-side`
+      - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。
+    - `farthest-side`
+      - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。
+
+- `<position>`
+  - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。
+
+## 例
+
+### 基本的な円
+
+下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。
+
+{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}
+- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes)
diff --git a/files/ja/web/css/basic-shape/ellipse()/index.md b/files/ja/web/css/basic-shape/ellipse()/index.md
new file mode 100644
index 0000000000..54b5f5b6b4
--- /dev/null
+++ b/files/ja/web/css/basic-shape/ellipse()/index.md
@@ -0,0 +1,67 @@
+---
+title: ellipse()
+slug: Web/CSS/basic-shape/ellipse()
+tags:
+  - CSS
+  - CSS データ型
+  - CSS シェイプ
+  - ellipse
+  - CSS 関数
+  - データ型
+  - Reference
+browser-compat: css.types.basic-shape.ellipse
+translation_of: Web/CSS/basic-shape/ellipse()
+---
+{{CSSRef}}
+
+**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("&lt;basic-shape&gt;")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。
+
+## 構文
+
+```css
+shape-outside: ellipse(40% 50% at left);
+shape-outside: ellipse(closest-side farthest-side at 30%);
+```
+
+楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。
+
+### 値
+
+- `<shape-radius>`
+
+  - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。
+
+    - `closest-side`
+      - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。
+    - `farthest-side`
+      - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。
+
+- `<position>`
+  - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。
+
+## 例
+
+### 基本的な ellipse() の例
+
+この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。
+
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}
+
+### closest-side / farthest-side の値の使用
+
+キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。
+
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}
+- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes)
diff --git a/files/ja/web/css/basic-shape/index.md b/files/ja/web/css/basic-shape/index.md
index 56b4c9da6e..d91d5c180a 100644
--- a/files/ja/web/css/basic-shape/index.md
+++ b/files/ja/web/css/basic-shape/index.md
@@ -8,118 +8,138 @@ tags:
   - リファレンス
 translation_of: Web/CSS/basic-shape
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p> <a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>&lt;basic-shape&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。</p>
+**`<basic-shape>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、{{cssxref("clip-path")}}、{{cssxref("shape-outside")}}、{{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。
 
-<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div>
+{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+`<basic-shape>` データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。
 
-<p><code>&lt;basic-shape&gt;</code> データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。</p>
+シェイプを作成するときは、 `<basic-shape>` の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、X 座標が右方向、Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。
 
-<p>シェイプを作成するときは、 <code>&lt;basic-shape&gt;</code> の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、 X 座標が右方向、 Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。</p>
+既定の参照ボックスは `margin-box` であり、`shape-outside: circle(50%)` を使用して円を生成すると下記のようになります。形状はマージンボックスを参照して定義されています。
 
-<h3 id="Shape_functions" name="Shape_functions">シェイプ関数</h3>
+![Firefox DevTools の Shape Inspector で円を検査している図。ボックスモデルのさまざまな部分が強調表示されています。](shapes-reference-box.png)
 
-<p>以下のシェイプに対応しています。 <code>&lt;basic-shape&gt;</code> 値はすべて関数表記であり、 <a href="/ja/docs/Web/CSS/Value_definition_syntax">値定義構文</a>で定義されます。</p>
+### シェイプ関数
 
-<dl>
- <dt><code><a id="inset()" name="inset()"></a>inset()</code></dt>
- <dd>
- <pre class="syntaxbox"><code>inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</code></pre>
+以下のシェイプに対応しています。`<basic-shape>` 値はすべて関数表記であり、[値定義構文](/ja/docs/Web/CSS/Value_definition_syntax)で定義されます。
 
- <p>内部の長方形を定義します。</p>
+- `{{cssxref("basic-shape/inset()","inset()")}}`
 
- <p>最初の4つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定プロパティの構文に従い、1つ、2つ、4つの値で全四辺を設定することができます。</p>
+  - : 内部の長方形を定義します。
 
- <p><a href="/ja/docs/Web/CSS/border-radius"><code>&lt;border-radius&gt;</code></a> の引数は省略可能で、 border-radius 一括指定プロパティの構文を使用して、内部の矩形の角の丸みを定義します。</p>
+    ```css
+    inset( <shape-arg>{1,4} [round <border-radius>]? )
+    ```
 
- <p>内部の矩形で2つの距離の組み合わせが、その軸の長さを超えていた場合（たとえば左右の距離がそれぞれ75％に設定された場合など）は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空のフロート領域を生成します。</p>
- </dd>
- <dt><code><a id="circle()" name="circle()"></a>circle()</code></dt>
- <dd>
- <pre class="syntaxbox"><code>circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</code></pre>
+    最初の 4 つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定の構文に従い、1 つ、2 つ、4 つの値で全四辺を設定することができます。
 
- <p>引数 <code>&lt;shape-radius&gt;</code> は<em>r</em>、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して <code>sqrt(width^2+height^2)/sqrt(2)</code> としての割合になります。</p>
+    任意の [`<border-radius>`](/ja/docs/Web/CSS/border-radius) の引数は省略可能で、 border-radius 一括指定の構文を使用して、内部の矩形の角の丸みを定義します。
 
- <p>引数 {{cssxref("&lt;position&gt;")}} は円の中心を定義します。省略時は既定で中央になります。</p>
- </dd>
- <dt><code><a id="ellipse()" name="ellipse()"></a>ellipse()</code></dt>
- <dd>
- <pre class="syntaxbox"><code>ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</code></pre>
+    内部の矩形で 2 つの距離の組み合わせが、その軸の長さを超えていた場合 (たとえば左右の距離がそれぞれ 75% に設定された場合など) は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空の浮動領域を生成します。
 
- <p>引数 <code>&lt;shape-radius&gt;</code> は、 r<sub>x</sub> と r<sub>y</sub>、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅（r<sub>x</sub> 値の場合）と高さ（r<sub>y</sub> 値の場合）に対する割合になります。</p>
+- `{{cssxref("basic-shape/circle()","circle()")}}`
 
- <p>引数 position は楕円の中心を定義します。省略時は既定で中央になります。</p>
- </dd>
- <dt><code><a id="polygon()" name="polygon()"></a>polygon()</code></dt>
- <dd>
- <pre class="syntaxbox"><code>polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</code></pre>
+  - : 半径と位置を使用して円を定義します。
 
- <p><code>&lt;fill-rule&gt;</code> は多角形の内部を決めるために使用される<a href="/ja/docs/Web/SVG/Attribute/fill-rule">塗りつぶし規則</a>を表します。指定可能な値は <code>nonzero</code> と <code>evenodd</code> です。省略時の既定値は <code>nonzero</code> です。</p>
+    ```css
+    circle( [<shape-radius>]? [at <position>]? )
+    ```
 
- <p>それぞれの shape-arg の組における引数 <em>x<sub>i</sub></em> と <em>y<sub>i</sub></em> は、多角形の i 番目の頂点の座標を表します。</p>
- </dd>
- <dt><code><a id="path()" name="path()"></a>path()</code></dt>
- <dd>
- <pre class="syntaxbox"><code>path( [&lt;fill-rule&gt;,]? &lt;string&gt;)</code></pre>
+    引数 `<shape-radius>` は _r_、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して `sqrt(width^2+height^2)/sqrt(2)` としての割合になります。
 
- <p>省略可能な <code>&lt;fill-rule&gt;</code> は、パスの内部を決めるために使用される<a href="/ja/docs/Web/SVG/Attribute/fill-rule">塗りつぶし規則</a>を表します。指定可能な値は <code>nonzero</code> と <code>evenodd</code> です。省略時の既定値は <code>nonzero</code> です。</p>
+    引数 {{cssxref("&lt;position&gt;")}} は円の中心を定義します。省略時は既定で中央になります。
 
- <p>必須の &lt;string&gt; は、引用符で囲まれた <a href="/ja/docs/SVG/Attribute/d">SVG Path</a> です。</p>
- </dd>
-</dl>
+- `{{cssxref("basic-shape/ellipse()","ellipse()")}}`
 
-<p>上記で定義されていない引数は、以下のように定義されています。</p>
+  - : 2 つの半径と位置を使用して楕円を定義します。
 
-<pre class="syntaxbox"><code>&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
-&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side</code></pre>
+    ```css
+    ellipse( [<shape-radius>{2}]? [at <position>]? )
+    ```
 
-<p>円や楕円の半径を定義します。省略時の既定値は <code>closest-side</code> です。</p>
+    引数 `<shape-radius>` は、rx と ry、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅 (rx 値の場合) と高さ (ry 値の場合) に対する割合になります。
 
-<p><code>closest-side</code> はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。</p>
+    引数 position は楕円の中心を定義します。省略時は既定で中央になります。
 
-<p><code>farthest-side</code> はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。</p>
+- `{{cssxref("basic-shape/polygon()","polygon()")}}`
 
-<h2 id="Computed_values_of_basic_shapes" name="Computed_values_of_basic_shapes">基本シェイプの計算値</h2>
+  - : SVG の {{SVGAttr("fill-rule")}} と一連の頂点を使用して多角形を定義します。
 
-<p><code>&lt;basic-shape&gt;</code> 関数での値は以下の例外を除けば、規定通りに計算されます。</p>
+    ```css
+    polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+    ```
 
-<ul>
- <li>省略された値は既定値として含められ計算されます。</li>
- <li><code>circle()</code> または <code>ellipse()</code> における {{cssxref("&lt;position&gt;")}} 値は、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした（水平と垂直）オフセットの組として計算されます。</li>
- <li><code>inset()</code> での <a href="/ja/docs/Web/CSS/border-radius"><code>&lt;border-radius&gt;</code></a> 値は全8つの {{cssxref("length")}} またはパーセント値の展開リストとして計算されます。</li>
-</ul>
+    `<fill-rule>` は多角形の内部を決めるために使用される塗りつぶし規則 ({{SVGAttr("fill-rule")}}) を表します。指定可能な値は `nonzero` と `evenodd` です。省略時の既定値は `nonzero` です。
 
-<h2 id="Interpolation_of_basic_shapes" name="Interpolation_of_basic_shapes">基本シェイプの補間</h2>
+    リスト内にある引数の組は、 _xi_ および _yi_ すなわち多角形の i 番目の頂点の X 座標と Y 座標を表します。
 
-<p> ある <code>&lt;basic-shape&gt;</code> と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("&lt;length&gt;")}}、 {{cssxref("&lt;percentage&gt;")}}、 {{cssxref("calc", "calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば（両方のリストの同じ位置に <code>nonzero</code> があった場合など）、それらの値は補間が行われます。</p>
+- `path()`
 
-<ul>
- <li>どちらのシェイプも同じ参照ボックスを使う必要があります。</li>
- <li>両方のシェイプが同じ型で、型が <code>ellipse()</code> または <code>circle()</code> で、半径に <code>closest-side</code> または <code>farthest-side</code> のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li>
- <li>両方のシェイプの型が <code>inset()</code> の場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li>
- <li>両方のシェイプの型が <code>polygon()</code> で、両方の多角形が同じ数の角を持っており、同じ <code>&lt;fill-rule&gt;</code> を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li>
- <li>両方のシェイプの型が <code>path()</code> の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。</li>
- <li>それ以外の場合は補間が行われません。</li>
-</ul>
+  - : SVG の {{SVGAttr("fill-rule")}} と SVG の[パス定義](/ja/docs/Web/SVG/Attribute/d)を使用してシェイプを定義します。
 
-<h2 id="Examples" name="Examples">例</h2>
+    ```css
+    path( [<fill-rule>,]? <string>)
+    ```
 
-<h3 id="Animated_polygon" name="Animated_polygon">アニメーションする多角形</h3>
+    省略可能な `<fill-rule>` は多角形の内部を決めるために使用される塗りつぶし規則 ({{SVGAttr("fill-rule")}}) を表します。指定可能な値は `nonzero` と `evenodd` です。省略時の既定値は `nonzero` です。
 
-<p>この例では、 <a href="/ja/docs/Web/CSS/@keyframes">@keyframes</a> @-規則を使用して、二つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。</p>
+    必須の \<string> は、引用符で囲まれた [SVG パス](/ja/docs/Web/SVG/Attribute/d)です。
 
-<h4 id="HTML">HTML</h4>
+上記で定義されていない引数は、以下のように定義されています。
 
-<pre class="brush: html">&lt;div&gt;&lt;/div&gt;</pre>
+```css
+<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+```
 
-<h4 id="CSS">CSS</h4>
+円や楕円の半径を定義します。省略時の既定値は `closest-side` です。
 
-<pre class="brush: css">div {
+`closest-side` はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。
+
+`farthest-side` はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。
+
+## 解説
+
+### 基本シェイプの計算値
+
+`<basic-shape>` 関数の中の値は、以下の例外を除けば、規定通りに計算されます。
+
+- 省略された値は既定値として含められ計算されます。
+- {{cssxref("&lt;position&gt;")}} 値が `circle()` または `ellipse()` で使用されると、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした (水平と垂直) オフセットの組として計算されます。
+- [`<border-radius>`](/ja/docs/Web/CSS/border-radius) が `inset()` で使用されると、全 8 つの {{cssxref("length")}} またはパーセント値のリストとして展開され計算されます。
+
+### 基本シェイプの補間
+
+ある `<basic-shape>` と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("&lt;length&gt;")}}、 {{cssxref("&lt;percentage&gt;")}}、 {{cssxref("calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば、それらの値は補間が行われます。
+
+- どちらのシェイプも同じ参照ボックスを使う必要があります。
+- 両方のシェイプが同じ型で、型が `ellipse()` または `circle()` で、半径に `closest-side` または `farthest-side` のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。
+- 両方のシェイプの型が `inset()` の場合、シェイプ関数のそれぞれの値の間で補間が行われます。
+- 両方のシェイプの型が `polygon()` で、両方の多角形が同じ数の角を持っており、同じ `&lt;fill-rule&gt;` を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。
+- 両方のシェイプの型が `path()` の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。
+- それ以外の場合は補間が行われません。
+
+## 例
+
+<h3 id="Animated_polygon">アニメーションする多角形</h3>
+
+この例では、[@keyframes](/ja/docs/Web/CSS/@keyframes) アットルールを使用して、2 つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。
+
+#### HTML
+
+```html
+<div></div>
+```
+
+#### CSS
+
+```css
+div {
   width: 300px;
   height: 300px;
   background: repeating-linear-gradient(red, orange 50px);
@@ -136,38 +156,23 @@ translation_of: Web/CSS/basic-shape
   to {
     clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
   }
-}</pre>
+}
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</p>
+{{EmbedLiveSample('Animated_polygon','340', '340')}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;') }}</td>
-   <td>{{ Spec2('CSS Shapes') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.types.basic-shape")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}</li>
- <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li>
-</ul>
+- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}
+- [CSS シェイプのパスを編集する — Firefox 開発者ツール](/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes)
+- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)
diff --git a/files/ja/web/css/basic-shape/inset()/index.md b/files/ja/web/css/basic-shape/inset()/index.md
new file mode 100644
index 0000000000..7afdcbb0eb
--- /dev/null
+++ b/files/ja/web/css/basic-shape/inset()/index.md
@@ -0,0 +1,51 @@
+---
+title: inset()
+slug: Web/CSS/basic-shape/inset()
+tags:
+  - CSS
+  - CSS データ型
+  - CSS シェイプ
+  - inset
+  - CSS 関数
+  - データ型
+  - Reference
+browser-compat: css.types.basic-shape.inset
+translation_of: Web/CSS/basic-shape/inset()
+---
+{{CSSRef}}
+
+**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("&lt;basic-shape&gt;")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。
+
+## 構文
+
+```css
+shape-outside: inset(20px 50px 10px 0 round 50px);
+```
+
+### 値
+
+- `<length-percentage>{1,4}`
+  - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。
+- `<border-radius>`
+  - : オプションの [`<border-radius>`](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。
+
+## 例
+
+### 基本的な内側の矩形の例
+
+下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。
+
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}
+- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes)
diff --git a/files/ja/web/css/basic-shape/polygon()/index.md b/files/ja/web/css/basic-shape/polygon()/index.md
new file mode 100644
index 0000000000..9a2df5b4d0
--- /dev/null
+++ b/files/ja/web/css/basic-shape/polygon()/index.md
@@ -0,0 +1,51 @@
+---
+title: polygon()
+slug: Web/CSS/basic-shape/polygon()
+tags:
+  - CSS
+  - CSS データ型
+  - CSS シェイプ
+  - polygon
+  - CSS 関数
+  - データ型
+  - Reference
+browser-compat: css.types.basic-shape.polygon
+translation_of: Web/CSS/basic-shape/polygon()
+---
+{{CSSRef}}
+
+**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("&lt;basic-shape&gt;")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。
+
+## 構文
+
+```css
+clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%);
+```
+
+### 値
+
+- `<fill-rule>`
+  - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。
+- `[<length-percentage><length-percentage>]#`
+  - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。
+
+## 例
+
+### 基本的な polygon() の例
+
+この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。
+
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}
+- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes)