clip-path polygon

### 使用 CSS `clip-path` 和 `polygon()` 实现图形裁剪

#### 定义与功能
`clip-path` 是一种强大的 CSS 属性，用于定义元素的可见区域。当应用该属性时，只有位于指定路径内的部分才会被显示出来[^2]。

对于复杂形状的需求，`polygon()` 函数尤为适用。它接受一系列坐标参数作为顶点位置，这些顶点依次相连形成一个多边形边界，进而决定哪些内容可以展现给用户查看[^3]。

#### 基本语法结构
要使用 `polygon()` 来创建特定形状，需遵循如下格式：

clip-path: polygon(x1 y1, x2 y2, ..., xn yn);

这里 `(xi yi)` 表示每一个角的位置，单位既可以采用百分比也可以是绝对像素值[^4]。

#### 示例代码展示
下面是一个简单的例子，展示了如何利用 `polygon()` 创建三角形的效果：

<div class="triangle"></div>
<style>
.triangle {
  width: 200px;
  height: 200px;
  background-color: blue;
  /* 设置三个顶点 */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
</style>

这段代码会生成一个蓝色填充的直角等腰三角形，底边平行于屏幕底部并占据整个容器宽度的一半[^1]。

#### 应用场景拓展
除了基本几何图形外，还可以借助更多顶点组合出更加复杂的图案，比如星型、心型或者其他不规则形态；甚至可以通过动画改变各个顶点的位置来达到动态变换视觉效果的目的。