剪辑路径
CSS属性使用裁剪来创建元素的可视区域。 区域内的部分表示区域外的隐藏。
范例
div {
width: 200px；
height: 200px；
background: #6c00af；
-webkit-clip-path: polygon (
28% 6%，
71% 15%、
100% 75%，
18% 39%，
63% 27%，
16% 22%，
65% 19%
)；
clip-path: polygon (
28% 6%，
71% 15%、
100% 75%，
18% 39%，
63% 27%，
16% 22%，
65% 19%
)；
}
绘制cilp-path神器
语法
/* Keyword values */
clip-path: none；
/* values */
clip-path : URL (resources.SVG # C1 )；
/* values */
clip-path :边距盒；
clip-path: border-box；
clip-path: padding-box；
clip-path: content-box；
clip-path :文件盒；
clip-path: stroke-box；
clip-path: view-box；
/* values */
clip-path:inset(100px50px )；
clip-path : circle (50 pxat 0100 px )；
clip-path : polygon (50 % 0，100% 50%，50% 100%，0 % 50 % )；
clip-path:path(m0.5、1c0.5、1、0.7、0、0.3a0.25、0.25、1、0.3a0.25、0.25、1、1、1
/* Box and shape values combined */
clip-path : padding-box circle (50 pxat 0100 px )；
/*全球价值* /
clip-path :输入；
clip-path :初始化；
clip-path: unset；
取值
用于剪切元素的路径由表示
大小和位置由值定义的形状。 如果未指定几何框，则边界框将用作参照框
一起声明时，将提供与基本形状对应的引用框。 定制将在特定框的边上包含任意形状的拐角，例如在border-radius中定义的剪切路径。 框中可以指定以下值之一：
边距-盒
使用边距盒作为引用框。
border-box
使用border box作为参照框。
padding-box
使用padding box作为参照框。
content-box
使用content box作为浏览框。
菲尔-博克斯
使用对象边界框作为参照框。
stroke-box
使用“笔划边界框”(stroke bounding box )作为参考框
view-box
使用最近的SVG视口(视口)作为参考框。 如果viewBox特性指定为图元创建SVG视口，则参考框位于坐标系的原点，而参考框位于由viewBox特性设置的坐标系的原点。 参考框的大小用于设置viewBox特性的宽度和高度值。
诺诺
不创建的剪切路径。
到目前为止，我已经介绍了关于使用CSS的clip-path属性实现不规则图形显示的文章。 有关更多相关CSS的clip-path不规则图形内容，请搜索脚本屋以前的文章或继续浏览下一篇相关文章。 今后，我想支持脚本屋。