CSS Reference

polygon()

CSS で多角形を描く

polygon() 関数は、基本シェイプ関数と呼ばれる CSS 関数で、CSS を利用して多角形を描くことに利用できます。

基本シェイプ関数の値となる <basic-shape> データ型は、clip-path、shape-outside、offset-path の各プロパティで使用されます。

polygon() 関数をはじめ、基本シェイプ関数には下記のようなものが挙げられます。

これらの CSS 関数を使って、CSS で図形を簡単に定義することが可能です。

詳細説明

polygon() 関数の基本的な構文は下記のようになります。

<polygon()> = polygon(
  <'fill-rule'>? ,
  [<length-percentage> <length-percentage>]#
)

polygon() 関数では、引数として後述する <fill-rule> を指定後（省略可）、カンマ（,）に続けて <length> もしくは <percentage> 値により参照ボックス内の x,y 座標を指定していきます。

例えば参照ボックスの左上隅は 0 0、右下隅は 100% 100% となりますが、座標を空白で区切った2つの <length> もしくは <percentage> 値で指定し、さらにそれらをカンマ（,）区切りで羅列することで、様々な図形を描写することができます。

/* polygon() 関数の記述例 */
polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%)

<fill-rule>

<fill-rule> は、SVG における fill-rule プロパティ（図形の内側と外側を定義するためのプロパティ）に該当し、下記の値が指定可能ですが、省略しても構いません。既定値は nonzero です。

nonzero キャンバス上の任意の点が図形の内側か外側かを決定するために、点から無限遠に向かって任意の方向に線を引き、その線が図形のセグメントと交差する回数を数えます。左から右に交差するごとに1を加え、右から左に交差するごとに1を引きます。最終的な交差数がゼロであれば、その点は図形の外側にあります。それ以外の場合、その点は図形の内側にあります。（既定値）
evenodd キャンバス上の任意の点が図形の内側か外側かを決定するために、点から無限遠に向かって任意の方向に線を引き、その線が図形のセグメントと交差する回数を数えます。交差数が奇数であれば、その点は図形の内側にあり、偶数であれば外側にあります。

polygon()のサンプルソース

.example01 {
  clip-path: polygon(50% 0%,
                  100% 50%,
                  50% 100%,
                  0% 50%);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}
.example02 {
  clip-path: polygon(0% 20%,
                  60% 20%,
                  60% 0%,
                  100% 50%,
                  60% 100%,
                  60% 80%,
                  0% 80%);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}
.example03 {
  clip-path: polygon(100% 0%,
                  50% 50%,
                  100% 100%);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome