clip-path

# clip-path

旧css也提供了一个clip属性，但只能用于裁剪一个矩形，其本质是根据overflow:hidden隐藏掉了裁剪外的区域，使用:

clip:rect(<top>,<right>,<bottom>,<left>);

创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().

clip-path: circle(40%);
clip-path: ellipse(130px 140px at 10% 20%);

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

/*其默认值是none。*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
		   div#k{
		    width:100px;
		    height:100px;
		    background-color:red;
		    -webkit-clip-path:polygon(50% 0px,100% 100%,0px 100%);
		   }
		</style>
	</head>
	<body>
	<div id="k"></div>
	</body>
</html>

polygon里面第一个坐标为X方向，第二个为Y方向，这里写的X是50%，Y是0px，也就是说从这个元素的宽50%开始到高0px裁剪。接着从这个点往下裁剪。也就是PS里面的选区，区域外面的将会被裁剪掉。

剪出菱形

div#k{
	width:100px;
	height:100px;
	background-color:red;
	-webkit-clip-path:polygon(0px 50%,50% 0px,100% 50%,50%
	100%,0px 50%);
}

← css filter →