Ingenius solution to create a CSS triangle with a gradient.

gradient-triangles.css

/* 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;
}