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

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

浏览器兼容性

BCD tables only load in the browser

参见