From 58862f7167f9118685c7f5782762940870e6aeea Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 24 Dec 2024 15:43:14 +0900 Subject: [PATCH] =?UTF-8?q?2024/09/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/basic-shape/polygon/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/ja/web/css/basic-shape/polygon/index.md b/files/ja/web/css/basic-shape/polygon/index.md index d7649b27bd5910..9778dc4eca2817 100644 --- a/files/ja/web/css/basic-shape/polygon/index.md +++ b/files/ja/web/css/basic-shape/polygon/index.md @@ -2,7 +2,7 @@ title: polygon() slug: Web/CSS/basic-shape/polygon l10n: - sourceCommit: 9760ffbbd1720d09b7d36853edd421fe5447dbc4 + sourceCommit: c5613708408042af5889be39cfb203799879175b --- {{CSSRef}} @@ -14,7 +14,6 @@ l10n: ## 構文 ```css-nolint - /* 座標リストとして指定 */ /* polygon( , ... )*/ polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%) @@ -35,7 +34,7 @@ polygon(evenodd, 0% 0%, 50% 50%, 0% 100%) ### 値 - [``](/ja/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}} - - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、塗りつぶしルールを指定します。 + - : オプションで `nonzero` (省略時の既定値)または `evenodd` のどちらかであり、塗りつぶしルールを指定します。 - {{cssxref("length-percentage")}} - : 多角形の各頂点は `` の値の組で表します。この値は図形の[参照ボックス](/ja/docs/Web/CSS/CSS_shapes/Basic_shapes#参照ボックス)からの相対座標で頂点の x/y 座標を表します。 @@ -52,10 +51,11 @@ polygon(evenodd, 0% 0%, 50% 50%, 0% 100%) polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn) 上記のように指定された場合、コンテナーの座標をマッピングすると、次のように視覚化できます。 -| 軸 | 点 1 | 点 2 | 点 3 | 点 4 | 点 n | -| — | ---- | ---- | ---- | ---- | ------------- | -| x | 0% | 100% | 100% | 0% | xn | -| y | 0% | 0% | 100% | 100% | yn | + +| 軸名 | 点 1 | 点 2 | 点 3 | 点 4 | 点 n | +| ---- | ---- | ---- | ---- | ---- | ------------- | +| x | 0% | 100% | 100% | 0% | xn | +| y | 0% | 0% | 100% | 100% | yn | その座標を CSS の {{cssxref("clip-path")}} プロパティに、 `polygon()` 関数を使用して適用します。 @@ -100,7 +100,7 @@ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); ### shape-outside のための多角形を設定 -この例では、 {{cssxref("shape-outside")}} プロパティを使用して、テキストが従う図形を作成しています。 +この例では、 {{cssxref("shape-outside")}} プロパティを使用して、テキストが沿う位置の図形を作成しています。 ```html