Skip to content

Instantly share code, notes, and snippets.

Created August 19, 2012 06:30
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>
Copy link

ixth commented Aug 21, 2012

Reminds me @kizu's experiments:

Copy link

Mottie commented Feb 4, 2013

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

Copy link

Thanks Mottie, done!

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