Skip to content

Instantly share code, notes, and snippets.

Forked from LeaVerou/dabblet.css
Created March 2, 2013 13:43
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment