css 钻石图像 - 通过剪辑路径

Posted 2021-05-13

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

// alert('Hello world!');

<img src="http://csssecrets.io/images/adamcatlace.jpg" />
<img src="http://csssecrets.io/images/adam-sleeping.jpg" />

/**
 * Diamond images — via 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;
}

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%);
}