Hexagon kitty - By @LeaVerou

dabblet.css

/* Hexagon kitty - By @LeaVerou
   Disappointingly inflexible, but still interesting methinks.
 */

.hexagon {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 200px;
	transform: scale(1.25,.707) rotate(-45deg);
	overflow: hidden;
	backface-visibility: hidden; /* hack to make it smoother, suggested by Mottie  */
}

.hexagon > img {
	position: absolute;
	transform: rotate(45deg) scale(.8, 1.404);
	clip: rect(0,187px,200px,13px);
}

dabblet.html

<img src="http://placekitten.com/200/200"  />

<div class="hexagon"><img src="http://placekitten.com/200/200"  /></div>

settings.json

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

Reminds me @kizu's experiments: http://kizu.github.com/Polygons/

If you add -webkit-backface-visibility: hidden; to the .hexagon definition, the edges smooth out much more nicely.

Thanks Mottie, done!