Polygon kitties - By @LeaVerou

dabblet.css

/* Polygon kitties - By @LeaVerou */

div {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 200px;
	margin: 40px;
	overflow: hidden;
	backface-visibility: hidden; /* hack to make it smoother, suggested by Mottie  */
}

.hexagon {
	transform: scale(1.25,.707) rotate(-45deg);		
}

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

	.octagon img,
	.diamond img {
		transform: rotate(45deg);
	}
	
	.diamond img {
		width: 142%;
		margin: -21%;
	}

dabblet.html

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

settings.json

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