CSS polygon() 函数

定义和用法

CSS polygon() 函数用于定义一个多边形。

polygon() 函数与 clip-path 属性和 shape-outside 属性一起使用。

实例

例子 1

将图像裁剪为多边形：

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

亲自试一试

例子 2

将图像裁剪为多边形：

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

亲自试一试

例子 3

使用 polygon()、clip-path 和 shape-outside：

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

亲自试一试

CSS 语法

polygon(fill-rule, length-percentage)

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

参考：clip-path 属性

参考：shape-outside 属性

参考：circle() 函数

参考：ellipse() 函数

参考：inset() 函数