<div class="diamond">
<img src="http://csssecrets.io/images/adamcatlace.jpg" />
</div>
/**
* Diamond images — via transforms
*/
.diamond {
width: 250px;
height: 250px;
transform: rotate(45deg);
overflow: hidden;
margin: 100px;
}
.diamond img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
z-index: -1;
position: relative;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.