polygon()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
polygon()
は CSS の関数で、<basic-shape>
データ型の一つです。多角形を描画するために使用します。 1 つ以上の座標のペアを指定し、それぞれが形状の頂点を表します。
試してみましょう
構文
/* 座標リストとして指定 */
/* 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 つの角の座標を指定することで、親コンテンツの大きさの長方形の図形を作成します。
公式定義
例
三角形の作成
この例では、 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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このデータ型を使用するプロパティ:
clip-path
,shape-outside
- 基本シェイプのガイド