Diamond Avatar Link

by Eleazar Vargas

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a >
    <img src="http://1.gravatar.com/avatar/120006668dad4f8fdf1beefb15932841?s=100&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" width="100" height="100" />
</a>

<a href="http://www.binarymoon.co.uk/" class="diamond large">
    <img src="http://1.gravatar.com/avatar/120006668dad4f8fdf1beefb15932841?s=300&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" width="200" height="200" />
</a>

CSS

body {
    background:#aaa;
    padding:20px;
}

a.diamond {
    display:block;
    border:5px solid #fff;
    width:50px;
    height:50px;
    transform: rotate(-45deg);
    overflow:hidden;
    background:#000;
    border-radius:20px;
}

a.diamond.large {
    width:200px;
    height:200px;
    margin:30px;
}

a.diamond img {
    transform: rotate(45deg);
    margin:-25%;
    width:150%;
    height:150%;
}