polygon()はCSSの関数です。多角形を描画する為に使用します。

polygon関数の指定

polygon関数は図形の頂点の位置を指定します。

polygon(X軸の位置 Y軸の位置, X軸の位置 Y軸の位置, X軸の位置 Y軸の位置、 .....)

頂点の指定

polygon()は図形の頂点を指定します。例えば三角形の場合、3つの頂点の位置を指定します。
4角形なら4つの頂点というように多角形の頂点を指定します。

polygon(頂点1, 頂点2, 頂点3, ... 頂点N)

位置の指定

頂点の起点

各々の頂点には親要素の左上を起点( 0 x座標、0 y座標)としたx軸、y軸の位置を指定します。

単位

単位はpx、%(パーセント)などが指定出来ます。

頂点の数

三角形の場合、以下のようにX、Y軸の位置を3つ指定します。

polygon(X軸の位置 Y軸の位置, X軸の位置 Y軸の位置, X軸の位置 Y軸の位置)

例

例として正三角形を指定する場合、以下のようになります。なお、clip-pathプロパティを使用します。

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 100px;
  height: 100px;
  clip-path: polygon(50px 0, 0 100px, 100px 100px);
  background-color: blue;
}

結果

%(パーセント)指定

先ほどはpxを指定しましたが、%(パーセント)も指定出来ます。%を指定しておけば要素の大きさが変わっても頂点の位置の指定を変更する必要がなくなるので便利です。

CSS

.triangle {
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background-color: blue;
}

結果

最後に

特にありません。