1. Web
  2. CSS
  3. <basic-shape>
  4. polygon()

polygon()

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

polygon() CSS 函式是 <basic-shape> 資料型別 之一。它透過提供一個或多個座標對（每個座標對代表形狀的一個頂點）來繪製 多邊形。

試一試

clip-path: polygon(
  0% 20%,
  60% 20%,
  60% 0%,
  100% 50%,
  60% 100%,
  60% 80%,
  0% 80%
);

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

語法

css
/* 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 屬性

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>
    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>
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;
}

規範

規範
CSS Shapes Module Level 1
# funcdef-basic-shape-polygon

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者 於 最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.