CSS3 Triangle Gradients

ajcates

A.J. Cates

3 years ago · 5,020 views
6 comments 
#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,left top,right bottom,
		color-stop(.5, #eee),
		color-stop(0, #52882d)
	);
	border: 1px solid #fff;
}
Raw

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.

Tagged: css3 experiment gradient triangle
Comments are only visible to Forrst members. Log in or Request an invite.
3 new notifications