SOURCE

<div class="diamond">
	<img src="http://csssecrets.io/images/adamcatlace.jpg" />
</div>

菱形图片通过父级的旋转，和隐藏截取子元素，然后子元素配合旋转。图片旋转了还是占用原来的盒子空间。图片的宽度与容器的对角线相等，那么就是边长的根号二倍。也就是1.414

.diamond {
	width: 250px;
	height: 250px;
	transform: rotate(45deg);
	overflow: hidden;
	margin: 100px;
}

.diamond img {
	max-width: 100%;
	transform: rotate(-45deg) scale(1.42);
}