polygon()
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月.
polygon() は CSS の関数で、<basic-shape> データ型の一つです。多角形を描画するために使用します。 1 つ以上の座標のペアを指定し、それぞれが形状の頂点を表します。
試してみましょう
clip-path: polygon( 0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80% ); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); <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%; } 構文
/* 座標リストとして指定 */ /* polygon(<length-percentage> <length-percentage>, ... )*/ polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%) polygon(0px 0px, 200px 100px, 0px 200px) polygon(0% 0px, 100% 100px, 0px 100%) polygon(0 0, 50% 1rem, 100% 2vw, calc(100% - 20px) 100%, 0 100%) /* 座標リストと塗りつぶしルールとして指定 */ /* polygon(<fill-rule> <length-percentage> <length-percentage>, ... )*/ polygon(nonzero, 0% 0%, 50% 50%, 0% 100%) polygon(evenodd, 0% 0%, 50% 50%, 0% 100%) polygon() の引数はカンマとオプションの空白で区切られます。最初の引数はオプションの <fill-rule> 値です。追加の引数は多角形を定義する点です。この点はそれぞれ x/y 座標 <length-percentage> の値を空間で区切ったもので、例えば左/上隅は "0 0"、右下隅は "100% 100%" となります。
メモ: SVG の <polygon> 要素には、fill-rule と points の独立した属性があり、points は区切り文字としてスペースとカンマを柔軟に使用できます。 CSS の polygon() では区切り文字に対するルールは厳密に適用されます。
値
<fill-rule>省略可-
オプションで
nonzero（省略時の既定値）またはevenoddのどちらかであり、塗りつぶしルールを指定します。 <length-percentage>-
多角形の各頂点は
<length-percentage>の値の組で表します。この値は図形の参照ボックスからの相対座標で頂点の x/y 座標を表します。
返値
<basic-shape> 値を返します。
解説
polygon() 関数で点の座標を指定すると、ほとんどの図形を作成することができます。この点を定義する順番は重要で、異なる図形を作ることができます。 polygon() 関数は少なくとも 3 つの点が必要で、これは三角形を作成しますが、上限はありません。
polygon() 関数はカンマ区切りの座標または点を値として受け入れます。各点は空間で区切られた x と y のペアの値で表します。このペアは多角形内の点の座標を示します。
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 |
その座標を CSS の clip-path プロパティに、 polygon() 関数を使用して適用します。
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); これは、左上 (0% 0%), 右上 (100% 0%), 右下 (100% 100%), 左下 (0% 100%) の 4 つの角の座標を指定することで、親コンテンツの大きさの長方形の図形を作成します。
公式定義
<polygon()> =
polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# )
<fill-rule> =
nonzero |
evenodd
<length-percentage> =
<length> |
<percentage>
例
三角形の作成
この例では、 3 点の座標を定義して三角形を形成します。
HTML
<div class="triangle"></div> CSS
.triangle { width: 400px; height: 400px; background-color: magenta; clip-path: polygon(100% 0%, 50% 50%, 100% 100%); } 結果
三角形の座標は、コンテナーの右上隅 (100% 0%)、中心点 (50% 50%)、右下隅 (100% 100%) です。
shape-outside のための多角形を設定
この例では、 shape-outside プロパティを使用して、テキストが沿う位置の図形を作成しています。
<div class="box"> <div class="shape"></div> <p> One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact. </p> </div> .box { width: 250px; } .shape { float: left; shape-outside: polygon( 0 5%, 15% 12%, 30% 15%, 40% 26%, 45% 35%, 45% 45%, 40% 55%, 10% 90%, 10% 98%, 8% 100%, 0 100% ); width: 300px; height: 320px; } p { font-size: 0.9rem; } 仕様書
| Specification |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-polygon |
ブラウザーの互換性
関連情報
- このデータ型を使用するプロパティ:
clip-path,shape-outside - 基本シェイプのガイド