什么是 Shape？
在 Web 开发中，shape 通常指通过 CSS 或 SVG 创建的几何图形，如圆形、多边形、路径等。
常用于剪裁区域（clip-path）、背景遮罩、图标绘制等场景。
CSS 中的 Shape：clip-path
clip-path 属性可以定义一个可见区域，将元素裁剪为指定形状。
示例：创建一个五角星形状
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);SVG 中的 Shape 元素
SVG 提供了多种基础图形元素，如：
<circle>：圆形<rect>：矩形<polygon>：多边形<path>：自定义路径（最强大）
示例：绘制一个三角形
<svg width="100" height="100">
<polygon points="50,10 90,90 10,90" fill="#3498db" />
</svg>实用技巧
- 使用在线工具（如 Clippy）快速生成
clip-path值 - 结合 CSS 动画实现动态形状变换
- 注意浏览器兼容性，部分旧版浏览器不支持复杂
clip-path