A LESS Mixin to mask a square image into a diamond shape (aka 45deg square).

Diamond Inside of a Square LESS Mixin

.diamond-inside-square (@square: 100px; @background-img) {
	.square(@square);
	.rotate(-45deg);
	margin: @square/4;
	overflow: hidden;
	&:after {
		.square(@square*1.5);
		.rotate(45deg);
		background: url(@background-img);
		display: block;
		content: '';
		margin: -(@square/4);
	}
}

HTML Markup

<div class="square"></div>

LESS Setup

.square {
	.diamond-inside-square(280px, 'http://fillmurray.com/g/420/420');
}

Here is a very Bill Murray example. 😃

Also I am using this in the context of Bootstrap, so .square() and .rotate() are native mixins.