如何使用clip-path: path(…)让裁切图形自适应按钮的宽度和高度？

让clip-path: path(…) 裁切图形自适应大小的技巧

使用 clip-path: path(…) 裁剪图形时，如何使其根据按钮尺寸自动调整大小，是一个常见问题。本文将提供解决方案。

关键在于使用相对单位（百分比）定义路径坐标。这样，无论按钮大小如何变化，裁剪路径都会相应调整。

首先，理解 path 函数的坐标系统。假设按钮宽度为 width，高度为 height，使用百分比定义路径点。例如，裁剪一个圆形：

clip-path: path('M 50% 0 A 50% 50% 0 0 1 100% 50% A 50% 50% 0 0 1 50% 100% A 50% 50% 0 0 1 0 50% A 50% 50% 0 0 1 50% 0 Z');

M 50% 0 表示从按钮中心顶部开始；A 50% 50% 0 0 1 100% 50% 绘制一个半径为按钮宽度和高度一半的圆弧，以此类推。

通过百分比，无论按钮尺寸如何变化，路径都会按比例缩放，实现自适应效果。

要裁剪其他形状，只需根据形状调整路径坐标，并使用百分比确保其适应不同尺寸。