polygon()
polygon()
CSS 函数是 <basic-shape>
数据类型 之一。它用于通过提供一个或多个坐标对来绘制 多边形,每个坐标对表示形状的一个顶点。
试一试
语法
/* Specified as coordinate list */
/* polygon(<length-percentage> <length-percentage>, ... )*/
polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%)
polygon(0px 0px, 200px 100px, 0px 200px)
polygon(0% 0px, 100% 100px, 0px 100%)
polygon(0 0, 50% 1rem, 100% 2vw, calc(100% - 20px) 100%, 0 100%)
/* Specified as coordinate list and fill rule*/
/* polygon(<fill-rule> <length-percentage> <length-percentage>, ... )*/
polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)
polygon()
参数之间用逗号和可选空格分隔。第一个参数是一个可选的 <fill-rule>
值。其他参数是定义多边形的点。每个点都是一对用空格分隔的 x/y 坐标 <length-percentage>
值,例如“0 0”和“100% 100%”分别表示左上角和右下角。
注意:SVG <polygon>
元素具有分别用于 fill-rule
和 points
的属性,并且 points
对空格和逗号分隔符的使用比较灵活。CSS polygon()
规则对分隔符的用法进行了严格执行。
参数
<fill-rule>
可选-
一个可选值为
nonzero
(省略时为默认值)或evenodd
,用于指定填充规则。 <length-percentage>
-
多边形的每个顶点都由一对
<length-percentage>
值表示,这些值相对于形状的 参考框 给出顶点的 x/y 坐标。
返回值
返回 <basic-shape>
值。
描述
通过指定其点的坐标,可以使用 polygon()
函数创建几乎任何形状。定义点的顺序很重要,并且会导致不同的形状。polygon()
函数至少需要 3 个点,这将创建一个三角形,但没有上限。
polygon()
函数接受逗号分隔的坐标或点作为其值。每个点都由一对空格分隔的 x
和 y
值表示,这些值指示多边形内点的坐标。
polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn)
根据上述内容,容器坐标的映射可以可视化为
轴 | 点 1 | 点 2 | 点 3 | 点 4 | 点 n |
---|---|---|---|---|---|
x | 0% | 100% | 100% | 0% | xn |
y | 0% | 0% | 100% | 100% | yn |
将这些坐标应用于使用 polygon()
函数的 CSS clip-path
属性
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
通过指定其四个角的坐标:左上角 (0% 0%
)、右上角 (100% 0%
)、右下角 (100% 100%
) 和左下角 (0% 100%
),这将创建一个与其父内容大小相同的矩形形状。
正式语法
<polygon()> =
polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# )
<fill-rule> =
nonzero |
evenodd
<length-percentage> =
<length> |
<percentage>
示例
创建三角形
在此示例中,通过定义其三个点的坐标来形成一个三角形。
HTML
<div class="triangle"></div>
CSS
.triangle {
width: 400px;
height: 400px;
background-color: magenta;
clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}
结果
三角形的坐标是容器的右上角 (100% 0%
)、中心点 (50% 50%
) 和右下角 (100% 100%
)。
设置形状外部的多边形
在此示例中,使用 shape-outside
属性为文本创建了一个要遵循的形状。
<div class="box">
<div class="shape"></div>
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a memorable night,
as it was to prove—hundreds of millions of people had watched the rising
smoke-wreaths of their fires without drawing any special inspiration from
the fact.
</p>
</div>
.box {
width: 250px;
}
.shape {
float: left;
shape-outside: polygon(
0 5%,
15% 12%,
30% 15%,
40% 26%,
45% 35%,
45% 45%,
40% 55%,
10% 90%,
10% 98%,
8% 100%,
0 100%
);
width: 300px;
height: 320px;
}
p {
font-size: 0.9rem;
}
规范
规范 |
---|
CSS Shapes 模块级别 1 # funcdef-basic-shape-polygon |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
- 使用此数据类型的属性:
clip-path
、shape-outside
- 基本形状指南