Skip to content

Instantly share code, notes, and snippets.

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="" />
<div class="hexagon"><img src="" /></div>

This comment has been minimized.

Copy link

@ixth ixth commented Aug 21, 2012

Reminds me @kizu's experiments:


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.


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