This site is supported by donations to The OEIS Foundation.
Template:Polygon
From OeisWiki
The following documentation is located at Template:Polygon/doc. [<Edit> Template:Polygon/doc]
[⧼Purge⧽ Template:Polygon]
[⧼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.)
Contents
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 andstroke width
(default:px
). Units may be chosen among%
,px
,cm
,mm
,in
,pc
,pt
,em
orex
; -
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 an
-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
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}}
- {{Square}}
- {{Round square}} ({{rounded corners square}})
- {{Rect}} ({{rectangle}})
- {{Round rect}} ({{rounded corners rectangle}})
- {{Polyline}}
- {{Polygon}} ({{closed polyline}})
- {{Regular polygon}}
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}})
Notes
- ↑ www.w3schools.com, CSS border-style Property.