polygon()

polygon() は CSS の関数で、<basic-shape> データ型の一つです。

試してみましょう

構文

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 のどちらかであり、塗りつぶしルールを指定します。

[<length-percentage><length-percentage>]#

3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。

例

基本的な polygon() の例

この例では、polygon() を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。

仕様書

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-polygon

ブラウザーの互換性

BCD tables only load in the browser

関連情報