#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;
	background-image: -webkit-gradient(
		linear,left top,right bottom,
		color-stop(.5, #eee),
		color-stop(0, #52882d)
	border: 1px solid #fff;

Another CSS3 experiment I did because someone thought it couldn't be done.

CSS3 Triangle Gradients Example

Basically what I'm doing here is using pseudo :after selector to draw a box rotated 45º inside a box that has it's clip property set to only show 50% of the box, so all you see is the side of a rotated box(aka a triangle). The rotated box can then have it's background set to what ever you like, including a gradient or box-shadows.

You can find a working example of this code on my CSS3 Playground.

Of course it only works in webkit because I'm too lazy to add in the Mozilla properties. If someone else wants todo this I'll post the updated code.