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

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

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

以上是如何使用clip-path: path(...)讓裁切圖形自適應按鈕的寬度和高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！