css clip-path 的用法 制作菱形头像

img {
	max-width: 250px;
	margin: 20px;
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition: 1s;
}

先看看clip-path 的参数用法：

clip-path: polygon(第一个角的水平位置 第一个角的垂直位置，

第二个角的水平位置 第二个角的垂直位置 ，

第三个角的水平位置 第三个角的垂直位置 ，

第四个角的水平位置 第四个角的垂直位置 <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">)</span>

加上鼠标移上去的特效：

img:hover {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

以上代码来自于《css揭秘》