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)
值 描述
fill-rule

可選。指定填充規則。可以是 nonzero 或 evenodd。

默認值是 nonzero。
length-percentage

必需。指定定義多邊形的點。這可以是長度或百分比值。

每個點是一對 x 和 y 坐標。0 0 定義左上角，100% 100% 定義右下角。

技術細節

版本： CSS Shape Module Level 1

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

相關頁面

參考：clip-path 屬性

參考：shape-outside 屬性

參考：circle() 函數

參考：ellipse() 函數

參考：inset() 函數