Skip to content

Instantly share code, notes, and snippets.

@kahlil
Created September 16, 2010 10:09
Show Gist options
  • Save kahlil/582201 to your computer and use it in GitHub Desktop.
Save kahlil/582201 to your computer and use it in GitHub Desktop.
Ingenius solution to create a CSS triangle with a gradient.
/* Code is by A.J. Cates (http://ajcates.com). Find his post here: http://forr.st/~XGU */
#gradient-triangle {
width: 60px;
height: 60px;
position: absolute;
top: 3em;
left: -30px;
clip: rect(auto 30px 60px auto);
}
#gradient-triangle:after {
content: '';
position: absolute;
background-color: rgba(0,0,0, .7);
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
-webkit-transform:rotate(-45deg);
background-image: -webkit-gradient(
linear,right bottom,left bottom,
color-stop(.75, #52882d),
color-stop(0, #eee)
);
border: 1px solid #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment