Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created August 19, 2012 06:30
Show Gist options
  • Save LeaVerou/3392707 to your computer and use it in GitHub Desktop.
Save LeaVerou/3392707 to your computer and use it in GitHub Desktop.
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
Copy link

ixth commented Aug 21, 2012

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

@Mottie
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.

@LeaVerou
Copy link
Author

Thanks Mottie, done!

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