Cropping images in a diamond shape

dabblet.css

/**
 * Cropping images in a diamond shape
 */

.diamond {
	width: 350px;
	height: 350px;
	transform: rotate(45deg);
	outline: 1px solid black;
	position: relative;
	overflow: hidden;
	margin: 220px 0 0 177px;
}

.diamond img {
	max-height: 142%;
	transform: rotate(-45deg);
	margin: -21%;
	z-index: -1;
	position: relative;
}

dabblet.html

<!-- Photo from http://www.flickr.com/photos/endbradley/306280569/ -->
<div class="diamond">
	<img src="http://lea.verou.me/book/kitten-web.jpg" />
</div>

dabblet.js

// alert('Hello world!');

settings.json

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