-webkit-clip-path: polygon(0 0,100% 0,100% 40px,145px 40px,130px 60px,115px 40px,0 40px,0 0)
clip-path: polygon(0 0,100% 0,100% 40px,145px 40px,130px 60px,115px 40px,0 40px,0 0)
}
clip属性说明:检索或设置对象的可视区域。可视区域外的部分是透明的。
此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。
clip属性基础语法:
clip : auto rect ( number number number number )
取值:
auto : 默认值。对象无剪切
rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪切
注意事项:
一、clip属性必须和定位属性postion一起使用才能生效。
二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下边开始计算的。
兼容性:现代浏览器都支持
示例
html:
<div id="imgClip">img src="1.jpg" width="159"height="99" /><br></div>
css:
#imgClip {position:relativewidth:159pxheight:99pxbackground:#FFF985margin:0auto}
#imgClip img { position:absoluteclip:rect(21px 68px 51px 38px)}