剪裁（多边形）

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%，这只是盒子的右中间点。这些路径是自闭合的（也就是说，起点将是终点），因此最终的形状是三角形的形状。

这也可以用于具有图像或渐变作为背景的元素。

查看示例

输出：