Skip to content

Instantly share code, notes, and snippets.

@saadtazi

saadtazi/index.html

Created May 2, 2014 18:13
Show Gist options
  • Save saadtazi/60be4985090874894e45 to your computer and use it in GitHub Desktop.
Save saadtazi/60be4985090874894e45 to your computer and use it in GitHub Desktop.
Download ZIP
avatar using arrow form
Raw
index.html
<html>
<head>
<style type="text/less">
@bgColor: #ccc;
@avatarHeight: 20px;
@imageWidth: 64px;
body {
background-color: @bgColor;
}
.container {
background-color: transparent;
background-image: url(http://www.gravatar.com/avatar/60d2d59beb0e342e0ed6b223de4822c0?s=64);
background-repeat: no-repeat;
background-position: 50%;
width: @imageWidth;
height: @avatarHeight;
}
.triangle {
width: 0;
height: 0;
border-top: @avatarHeight/2 solid #ccc;
border-bottom: @avatarHeight/2 solid #ccc;
/* change 6x to make the arrow bigger...*/
border-right: 6px solid transparent;
border-left: 0;
margin: 0;
padding:0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
</head>
<div class="container">
<div class="triangle"></div>
</div>
</html>
@saadtazi
Copy link
Author

saadtazi commented May 2, 2014

demo at http://jsfiddle.net/saadtazi/v6vez/
Works in IE if less is compiled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment