【CSS Modules】polygon()関数の使い方
polygon()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
polygon()関数は、CSSのclip-pathプロパティの値として使用され、ウェブ要素の表示領域を多角形にクリップ（切り抜き）するために利用される関数です。この関数は、多角形の頂点を表す複数の座標ペアを引数として受け取ります。
各座標ペアは、x座標とy座標で構成され、通常はパーセンテージ（例: 50% 0%）やピクセル値（例: 100px 50px）などの単位で指定されます。これらの座標は、要素の左上隅を原点(0,0)とした相対的な位置を示します。指定された順序で頂点を結ぶことで多角形が形成され、その多角形の内側にあるコンテンツのみが表示され、外側の部分は非表示になります。最初の頂点と最後の頂点は自動的に連結されるため、常に閉じた形状が作成されます。
例えば、clip-path: polygon(0% 0%, 100% 0%, 50% 100%); と指定すると、要素が上辺が広く下辺が一点に集まる三角形に切り抜かれます。これにより、画像やHTML要素を長方形以外の自由なカスタム形状で表現することが可能になり、より視覚的に魅力的でユニークなウェブデザインを作成する際に非常に役立ちます。動的でインタラクティブなウェブコンテンツの形状を柔軟に制御するために、現代のウェブ開発で広く利用されています。
構文(syntax)
1polygon(<x1> <y1>, <x2> <y2>, <x3> <y3> [, <xn> <yn>]*)
引数(parameters)
[ (nonzero | evenodd) , ]? <length-percentage> <length-percentage> [, <length-percentage> <length-percentage>]{2,}
- <fill-rule>: optional; クリッピング領域の塗りつぶし方法を指定します。「nonzero」または「evenodd」を指定できます。
- <x> <y>: mandatory; ポリゴンの頂点のX座標とY座標をペアで指定します。これらの値は、
<length>または<percentage>で指定します。 - <x> <y> ...: mandatory; 少なくとも2つ以上の頂点のペアが必要です。
戻り値(return)
polygon() 関数は、指定された頂点座標のリストに基づいた多角形を定義する <basic-shape> 値を返します。