巧用 clip-path 实现按钮图形的自适应裁剪
使用 clip-path: path(...) 裁剪 SVG 或图片时，如何让裁剪路径根据容器大小动态调整？尤其对于按钮这种尺寸可变的元素，自适应裁剪路径至关重要。
解决方法是利用 CSS 的 url() 函数。url() 函数允许我们引用外部资源（例如 SVG 文件）作为 clip-path 的值。
通过创建包含可缩放路径的 SVG 文件，我们可以实现裁剪路径大小和形状的动态调整，从而适应按钮的尺寸变化。
具体步骤如下：
- 创建 SVG 文件: 创建一个包含圆角矩形路径的 SVG 文件，例如：
<code class="xml"><svg height="100%" width="100%"><path d="M 0 0 L 100 0 L 100 100 L 0 100 Z" /></svg></code>
(注意：此示例是一个简单的矩形，您可以根据需要修改路径 d 属性来创建更复杂的形状。)
-
保存 SVG 文件: 将 SVG 文件保存到项目中，例如
button-clip.svg。 -
CSS 应用: 在 CSS 中，使用
url()函数引用 SVG 文件：
<code class="css">button {
clip-path: url("button-clip.svg");
}</code>
现在，无论按钮尺寸如何变化，裁剪路径都会自动调整以匹配，实现完美的自适应裁剪效果。 记住，SVG 文件中的 width="100%" 和 height="100%" 属性是实现自适应的关键。
