Clover image crop - Everyone is circle cropping bio and profile pictures on the web now using border-radius. Do more than just circles.

index.html

<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>

style.scss

@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% );
  }
}