Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hexagon kitty - By @LeaVerou
/* 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);
}
<img src="http://placekitten.com/200/200" />
<div class="hexagon"><img src="http://placekitten.com/200/200" /></div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@ixth

This comment has been minimized.

Copy link

@ixth ixth commented Aug 21, 2012

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

@Mottie

This comment has been minimized.

Copy link

@Mottie Mottie commented Feb 4, 2013

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

@LeaVerou

This comment has been minimized.

Copy link
Owner Author

@LeaVerou LeaVerou commented Feb 21, 2013

Thanks Mottie, done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment