Skip to content

Instantly share code, notes, and snippets.

@oblaum

oblaum/dabblet.css

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