Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Forked from csssecrets/dabblet.css
Created November 13, 2014 18:45
Show Gist options
  • Save LeaVerou/ee0cafdde1170c8f457a to your computer and use it in GitHub Desktop.
Save LeaVerou/ee0cafdde1170c8f457a to your computer and use it in GitHub Desktop.
Cropping images in a diamond shape
/**
* Cropping images in a diamond shape
*/
.diamond {
width: 350px;
height: 350px;
transform: rotate(45deg);
outline: 1px solid black;
position: relative;
overflow: hidden;
margin: 220px 0 0 177px;
}
.diamond img {
max-height: 142%;
transform: rotate(-45deg);
margin: -21%;
z-index: -1;
position: relative;
}
<!-- Photo from http://www.flickr.com/photos/endbradley/306280569/ -->
<div class="diamond">
<img src="http://lea.verou.me/book/kitten-web.jpg" />
</div>
// alert('Hello world!');
{"view":"split-vertical","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