图片菱形效果

代码

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>rotate</title>
	</head>
	<body>
		<div class="picture">
			<img src="../5.jpeg" alt="" />
		</div>
	</body>
	<style>
		.picture {
			margin: 100px;
			width: 200px;
			height: 200px;
			transform: rotate(45deg);
			/* overflow: hidden; */
			/* border: 1px dashed green; */
		}

		.picture > img {
			width: inherit;
			height: inherit;
			transform: rotate(-45deg) scale(1.42);
			clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
			transition: 1s clip-path;
		}

		img:hover {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	</style>
</html>

参考

CSS揭秘

图片菱形效果 ​

代码 ​

参考 ​

图片菱形效果

代码

参考