可以使用 CSS 的 clip-path
属性制作不规则形状的图片遮罩。clip-path
是一个 CSS 属性,用于指定一个 SVG 路径作为元素的剪辑区域,从而控制元素的可见部分。具体步骤如下:
创建一个 SVG 路径,可以使用 Adobe Illustrator 或者在线 SVG 路径编辑器等工具创建。
将 SVG 路径转化为 CSS clip-path
属性可识别的值。方法有两种:
直接将 SVG 路径代码复制到 CSS 中,并在前面加上 url(#)
,例如 clip-path: url(#myPath);
将 SVG 路径代码转化为基于坐标的 polygon()
或 inset()
函数,例如 clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 50% 50%);
将 clip-path
属性应用到需要裁剪的图片元素中,例如 img { clip-path: url(#myPath); }
。
需要注意的是,clip-path
属性在某些老版本的浏览器中不被支持,可以使用 -webkit-clip-path
属性作为兼容性处理。
关键词高亮:clip-path
、SVG 路径、url()
、polygon()
、inset()
、兼容性处理。