拖动紫色点调整形状。双击点可删除(至少保留 3 个点)。
预设形状
▲ 三角形
■ 矩形
⬠ 五边形
⬡ 六边形
★ 星形
♥ 心形
➔ 箭头
✚ 十字
⬢ 梯形
CSS 代码
关于 clip-path
clip-path将元素裁剪为自定义形状——超出路径的部分隐藏polygon()函数接受x% y%形式的点坐标,定义可见区域- 所有现代浏览器支持;IE11 需要使用 SVG
<clipPath> - 其他形状函数:
circle(r at cx cy)、ellipse(rx ry at cx cy)、inset(top right bottom left)
使用场景
- 落地页斜切分隔区块
- 异形头像、图片遮罩(六边形头像等)
- 配合 transition 实现动画揭示效果
- 装饰形状,无需额外图片资源