什么是 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