使用 polygon() 与 circle() 的 clip-path

clip-path 会将元素的可见区域裁剪为指定形状。形状之外的所有内容都会变为不可见，但仍会在布局中占据空间。

将元素裁剪为圆形。参数是半径：

通过指定 x 轴半径、y 轴半径以及可选的中心位置，将元素裁剪为椭圆形：

功能最强大的 clip-path 用法。通过列出 x、y 坐标对来定义多边形：

将元素裁剪为带可选圆角的矩形。参数是内缩距离：

创建页面区块之间带角度的过渡效果：

具有相同点数的 clip-path 可以进行过渡，从而实现显现和变形动画：

对于简单的圆角形状，border-radius 更好，因为它可以与背景和边框配合使用。当您需要 border-radius 无法实现的非矩形形状时，请使用 clip-path。

path() 接受 SVG 路径字符串，用于创建任意形状：

clip-path 会创建新的堆叠上下文，并且在执行动画时可能在每一帧触发绘制。为 clip-path 添加动画的开销高于 transform 或 opacity，因此请谨慎组合使用。

clip-path 的坐标系统是元素的边框盒（对于 SVG，则是外边距盒）。百分比是相对于元素尺寸计算的。

clip-path 会将元素裁剪为几何形状。circle() 和 ellipse() 可以创建圆形和椭圆形裁剪区域。polygon() 可以定义任意多顶点形状。inset() 会将元素裁剪为带可选圆角的矩形。对于点数相同的多边形形状，可以在它们之间添加动画，实现醒目的显现效果。使用 path() 可以创建基于 SVG 的任意形状。