Skip to content

Instantly share code, notes, and snippets.

@nladart
Created March 18, 2013 03:57
Show Gist options
  • Save nladart/5184994 to your computer and use it in GitHub Desktop.
Save nladart/5184994 to your computer and use it in GitHub Desktop.
Clover image crop - Everyone is circle cropping bio and profile pictures on the web now using border-radius. Do more than just circles.
<div class="clover">
<img src="http://fillmurray.com/200/200" class="a" />
<img src="http://placecage.com/200/200" class="b" />
<img src="http://nicenicejpg.com/200/200" class="c" />
<img src="http://placesheen.com/200/200" class="d" />
</div>
@import "compass";
.clover {
img {
margin: 8px;
float: left;
}
.a {
@include border-radius( 50% 50% 0 50% );
}
.b {
@include border-radius( 50% 50% 50% 0 );
}
.c {
@include border-radius( 50% 0 50% 50% );
clear: left;
}
.d {
@include border-radius( 0 50% 50% 50% );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment