CSS polygon() 関数

定義と使用方法

CSS polygon() 関数は多角形を定義するために使用されます。

polygon() 関数と clip-path 属性と shape-outside 属性を一緒に使用します。

例

例1

画像を多角形にカットする：

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

実際に試してみる

例2

画像を多角形にカットする：

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

実際に試してみる

例3

を使用して polygon()、clip-path および shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

実際に試してみる

CSS 文法

polygon(fill-rule, length-percentage)
値 説明
fill-rule

オプションです。フィルルールを指定します。nonzero または evenodd ができます。

デフォルト値は nonzero です。
length-percentage

必須です。多角形を定義するポイントを指定します。これは長さまたはパーセンテージ値でできます。

各点は x と y 座標のペアです。0 0 は左上角を、100% 100% は右下角を定義します。

技術的詳細

バージョン： CSS Shape Module レベル1

ブラウザのサポート

テーブルの数字は、この機能を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

関連ページ

参考：clip-path 属性

参考：shape-outside 属性

参考：circle() 函数

参考：ellipse() 函数

参考：inset() 函数