polygon()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

polygon() CSS 函数是 <basic-shape> 数据类型之一。它用于通过提供一个或多个坐标对(每一个坐标代表形状的一个顶点)来绘制多边形

尝试一下

语法

css
/* 指定坐标列表 */
/* 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%)

/* 指定填充规则和坐标列表 */
/* 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-rulepoints,而 points 在使用空格和逗号分隔时是灵活的。CSS polygon() 规则对分隔符严格执行。

参数

<fill-rule> 可选

一个可选的值,可以是 nonzero(默认值,当省略时)或 evenodd,指定填充规则。

<length-percentage>

每个多边形的顶点由一对 <length-percentage> 值表示,给出了相对于形状的参考框的顶点的 x/y 坐标。

返回值

返回一个 <basic-shape> 值。

描述

通过指定其点的坐标,你可以使用 polygon() 函数创建几乎任何形状。定义点的顺序很重要,可能会导致不同的形状。polygon() 函数至少需要 3 个点,这将创建一个三角形,但没有上限。

polygon() 函数接受逗号分隔的坐标或点作为其值。每个点由一对以空格分隔的 xy 值表示,这些值指示多边形内的点的坐标。

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 属性:

css
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

这将创建一个矩形形状,其大小与其父内容相同,通过指定其四个角的坐标:左上角(0% 0%)、右上角(100% 0%)、右下角(100% 100%)和左下角(0% 100%)。

形式语法

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

<fill-rule> =
nonzero |
evenodd

<length-percentage> =
<length> |
<percentage>

示例

创建一个三角形

在此示例中,通过定义其三个点的坐标来形成一个三角形。

HTML

html
<div class="triangle"></div>

CSS

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 设置多边形

在此示例中,使用 shape-outside 属性创建一个形状,使文本遵循它。

html
<div class="box">
  <div class="shape"></div>
  <p>
    1782 年 11 月的一个夜晚,据说两兄弟坐在法国小镇 Annonay
    的冬季火炉旁,看着烟雾从壁炉的宽烟囱里升起。他们的名字叫史蒂芬和约瑟夫·蒙戈菲耶,他们是纸张制造商,以拥有思想深度和对所有科学知识和新发现的浓厚兴趣而闻名。在那之前的一晚——一个值得铭记的夜晚,正如后来所证明的——数亿人都看着他们火炉里升起的烟雾,却没有从中获得任何特别的灵感。
  </p>
</div>
css
.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;
}

规范

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-polygon

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
polygon()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见