如何使用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% 繪制一個半徑為按鈕寬度和高度一半的圓弧，以此類推。

通過百分比，無論按鈕尺寸如何變化，路徑都會按比例縮放，實現自適應效果。

要裁剪其他形狀，只需根據形狀調整路徑坐標，并使用百分比確保其適應不同尺寸。