Template:Polygon

The following documentation is located at Template:Polygon/doc. [<Edit> Template:Polygon/doc]
[⧼Purge⧽ Template:Polygon]

The {{polygon}} graphic template is used to draw a polygon. A nondegenerate polygon is a closed polyline with at least 3 distinct points vertices. (To draw an open polyline, you may use the {{polyline}} graphic template.)

Usage

{{polygon|n = ''n''|points = ''x_1, y_1; ...; x_n, y_n''|units = ''units''
|stroke width = ''stroke width''|stroke color = ''stroke color''|stroke style = ''stroke style''
|fill = ''fill''|z-index = ''z-index''
}}

where:

• n is the number (maximum 24) of points (vertices) considered (default: 0);
• points are the points (vertices) Cartesian coordinates "x_1, y_1; ...; x_n, y_n", without the quotes (default: "0, 0", without the quotes);
• units are the units associated with points and stroke width (default: px). Units may be chosen among %, px, cm, mm, in, pc, pt, em or ex;
• stroke width is the polygon stroke width (default: 1);
• stroke color is the polygon stroke color (default: black, i.e.     );
• stroke style is the stroke style for the polygon (default: solid), chosen among the values listed in the table of stroke styles below;
• fill is the polygon fill style (includes color, gradient, pattern) (default: none) (yet to be implemented for a n-sided polygon... if ever possible for a nonrectangular polygon!);
• z-index is the z-index of the polygon (default: 0, same as for the canvas).

Stroke styles

Table of stroke styles

Value	Description
none	no line/border
hidden	same as none (except in border conflict resolution for table elements)
dotted	dotted line/border
dashed	dashed line/border
solid	solid line/border
double	double line/border
groove	3D grooved line/border (the effect depends on the border-color value)
ridge	3D ridged line/border (the effect depends on the border-color value)
inset	3D inset line/border (the effect depends on the border-color value)
outset	3D outset line/border (the effect depends on the border-color value)
inherit	line/border style should be inherited from the parent element

Tests

Code	Result	Comment
{{canvas|width = 100|height = 100|{{polygon}}}}		(nothing drawn, needs at least two points)
{{canvas|width = 100|height = 100|{{polygon|0}}}}		(nothing drawn, needs at least two points)
{{canvas|width = 100|height = 100|{{polygon|1|0, 0}}}}		(nothing drawn, needs at least two points)
{{canvas|width = 100|height = 100|{{polygon|2|0, 0; 50, 0}}}}
{{canvas|width = 100|height = 100|{{rotate|{{polygon|2|0, 0; 50, 0}}|30|angle unit = deg}}}}
{{canvas|width = 100|height = 100|{{polygon|2|0, 0; 25, 25}}}}
{{canvas|width = 100|height = 100|{{polygon|3|45, 0; 0, 45; -45, 0}}}}
{{canvas|width = 100|height = 100|{{rotate|{{polygon|3|45, 0; 0, 45; -45, 0}}|45|angle unit = deg}}}}

Examples

<!-- -->{{canvas|width = 500|height = 500|float = right|<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|3| <!-- Trigon --> 50 * cos (0*(2*pi/3)), 50 * sin (0*(2*pi/3)); 50 * cos (1*(2*pi/3)), 50 * sin (1*(2*pi/3)); 50 * cos (2*(2*pi/3)), 50 * sin (2*(2*pi/3)); | stroke width = 3 | units = px | stroke color = red | stroke style = solid | z-index = 2 }}<!-- -->| angle = 3*(pi/6) }}<!-- -->| 75, 75 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|4| <!-- Tetragon --> 50 * cos (0*(2*pi/4)), 50 * sin (0*(2*pi/4)); 50 * cos (1*(2*pi/4)), 50 * sin (1*(2*pi/4)); 50 * cos (2*(2*pi/4)), 50 * sin (2*(2*pi/4)); 50 * cos (3*(2*pi/4)), 50 * sin (3*(2*pi/4)); | stroke width = 4 | units = px | stroke color = green | stroke style = dotted | z-index = 2 }}<!-- -->| angle = 2*(pi/8) }}<!-- -->| 425, 75 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| <!-- Pentagon --> 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); | stroke width = 5 | units = px | stroke color = gold | stroke style = double | z-index = 2 }}<!-- -->| angle = 1*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|6| <!-- Hexagon --> 50 * cos (0*(2*pi/6)), 50 * sin (0*(2*pi/6)); 50 * cos (1*(2*pi/6)), 50 * sin (1*(2*pi/6)); 50 * cos (2*(2*pi/6)), 50 * sin (2*(2*pi/6)); 50 * cos (3*(2*pi/6)), 50 * sin (3*(2*pi/6)); 50 * cos (4*(2*pi/6)), 50 * sin (4*(2*pi/6)); 50 * cos (5*(2*pi/6)), 50 * sin (5*(2*pi/6)); | stroke width = 6 | units = px | stroke color = blue | stroke style = dashed | z-index = 2 }}<!-- -->| angle = 0*(pi/12) }}<!-- -->| 75, 425 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|7| <!-- Heptagon --> 50 * cos (0*(2*pi/7)), 50 * sin (0*(2*pi/7)); 50 * cos (1*(2*pi/7)), 50 * sin (1*(2*pi/7)); 50 * cos (2*(2*pi/7)), 50 * sin (2*(2*pi/7)); 50 * cos (3*(2*pi/7)), 50 * sin (3*(2*pi/7)); 50 * cos (4*(2*pi/7)), 50 * sin (4*(2*pi/7)); 50 * cos (5*(2*pi/7)), 50 * sin (5*(2*pi/7)); 50 * cos (6*(2*pi/7)), 50 * sin (6*(2*pi/7)); | stroke width = 7 | units = px | stroke color = purple | stroke style = solid | z-index = 2 }}<!-- -->| angle = -1*(pi/14) }}<!-- -->| 425, 425 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|4| <!-- Square trough the centers of the 3-gon, 4-gon, 6-gon and 7-gon --> (2 * 175^2)^(1/2) * cos (0*(2*pi/4)), (2 * 175^2)^(1/2) * sin (0*(2*pi/4)); (2 * 175^2)^(1/2) * cos (1*(2*pi/4)), (2 * 175^2)^(1/2) * sin (1*(2*pi/4)); (2 * 175^2)^(1/2) * cos (2*(2*pi/4)), (2 * 175^2)^(1/2) * sin (2*(2*pi/4)); (2 * 175^2)^(1/2) * cos (3*(2*pi/4)), (2 * 175^2)^(1/2) * sin (3*(2*pi/4)); | stroke width = 3 | z-index = 1 }}<!-- -->| angle = 2*(pi/8) }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|8| <!-- Octagon --> 50 * cos (0*(2*pi/8)), 50 * sin (0*(2*pi/8)); 50 * cos (1*(2*pi/8)), 50 * sin (1*(2*pi/8)); 50 * cos (2*(2*pi/8)), 50 * sin (2*(2*pi/8)); 50 * cos (3*(2*pi/8)), 50 * sin (3*(2*pi/8)); 50 * cos (4*(2*pi/8)), 50 * sin (4*(2*pi/8)); 50 * cos (5*(2*pi/8)), 50 * sin (5*(2*pi/8)); 50 * cos (6*(2*pi/8)), 50 * sin (6*(2*pi/8)); 50 * cos (7*(2*pi/8)), 50 * sin (7*(2*pi/8)); | stroke width = 4 | units = px | stroke color = lightgreen | stroke style = dotted | z-index = 2 }}<!-- -->| angle = -2*(pi/16) }}<!-- -->| 250, 250 }}<!-- -->}}<!-- -->

yields

Rotation applied before translation

<!-- -->{{canvas|width = 500|height = 500|float = right|<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 0*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 1*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 2*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 3*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->}}<!-- -->

yields

Translation applied before rotation

<!-- -->{{canvas|width = 500|height = 500|float = right|<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 0*(2*pi/5) }}<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 1*(2*pi/5) }}<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 2*(2*pi/5) }}<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 3*(2*pi/5) }}<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 4*(2*pi/5) }}<!-- -->| angle = 1*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->}}<!-- -->

yields

See also

Drawing templates

• {{Canvas}}

• {{Draw text}}
• {{Image}}

• {{Point}}
• {{Line}}

• {{Square}}
• {{Round square}} ({{rounded corners square}})
• {{Rect}} ({{rectangle}})
• {{Round rect}} ({{rounded corners rectangle}})

• {{Polyline}}
• {{Polygon}} ({{closed polyline}})
• {{Regular polygon}}

• {{Circle}}
• {{Ellipse}}

Affine transforms templates

See Help:CSS Transforms.

• {{Origin}}

• {{Translate}} and {{transform-translate}}
• {{Flip}}
• {{Scale}} and {{transform-scale}}

• {{Rotate}} and {{transform-rotate}}
• {{SkewX}}
• {{SkewY}}
• {{Skew}} and {{transform-skew}}

• {{Affine}} ({{affine matrix}})