CSS: clip-path绘制图形，学不会我退出前端圈！

七娃博客 2021-03-06 652人阅读

CSS: clip-path绘制图形，学不会我退出前端圈！-QUI-Notes

刚看到clip-path的时候发现画图形的方法和svg的写法好像啊，例如：

clip-path：ellipse(45% 30% at 50% 50%);

SVG画椭圆

<ellipse cx="300" cy="350" rx="200" ry="50" fill="green" />

CSS: clip-path绘制图形，学不会我退出前端圈！-QUI-Notes

区别就是svg是html的写法，clip-path是css的写法！它们的api用法是类似的，更多svg绘图可以参考：

clip-path介绍：

MDN:CSS 属性使用裁剪方式创建元素的可显示区域,区域内的部分显示，区域外的隐藏。
W3C:clip-path 属性使您可以将元素裁剪为基本形状或 SVG 源。clip-path 将替代废弃的 clip 属性。
七娃：类似PS的剪切蒙版，蒙版内的显示，蒙版外的隐藏！知道这个这，接下来就好理解了。

clip-path用法：

clip-source SVG的URL。
basic-shape 绘制圆、椭圆、多边形或星形等剪切蒙版。
margin-box 使用 margin box 作为蒙版框。
border-box 使用 border box 作为蒙版框。
padding-box 使用 padding box 作为蒙版框。
content-box 使用 content box 作为蒙版框。
fill-box 利用对象边界框（object bounding box）作为蒙版框。
stroke-box 使用笔触边界框（stroke bounding box）作为蒙版框。
view-box 使用 SVG 视口作为蒙版框。
none 默认值。不创建的剪切路径。

注意：clip-path允许2个值，例如：clip-path: padding-box circle(50px at 0 100px)——从padding区域开始蒙版

兼容低版本浏览器写法：-webkit-clip-path。

案例——在线预览：https://course.51qux.com/clip-path

.inset img{ /*矩形*/
	clip-path: inset(100px 100px)
}
.inset1 img{ /*圆角矩*/
	clip-path: inset(100px 100px round 10px)
}
.circle img{ /*圆形*/
	clip-path: circle(50%);
}
.ellipse img{ /*椭圆形*/
	clip-path: ellipse(45% 30% at 50% 50%);
}
.polygon img{ /*三角形*/
	clip-path: polygon(50% 0,100% 50%,0 100%);
}
.polygon1 img{ /*菱形*/
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.polygon2 img{ /*正方形*/
	clip-path: polygon(0% 0%, 0% 200px,200px 200px,200px 0%);
}
.polygon3 img{ /*正五边形*/
	clip-path: polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
}
.polygon4 img{ /*正六边形*/
	clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)
}

效果：

CSS: clip-path绘制图形，学不会我退出前端圈！-QUI-Notes