剪裁（多邊形）

CSS：

div{
  width:200px;
  height:200px;
  background:teal;
  clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML：

<div></div>

在上面的示例中，使用多邊形剪下路徑將方形（200 x 200）元素剪下成三角形。輸出形狀是一個三角形，因為路徑從（即第一個座標為）0 0 開始 - 這是盒子的左上角，然後轉到 0 100% - 它是盒子的左下角，最後是到 100% 50%，這只是盒子的右中間點。這些路徑是自閉合的（也就是說，起點將是終點），因此最終的形狀是三角形的形狀。

這也可以用於具有影象或漸變作為背景的元素。

檢視示例

輸出：