Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Forum Tip: Triangle Shapes with CSS Gradients

Hi everybody,
Sam Lillicrap recently asked if it’s possible to create triangle shapes with CSS gradients, without using any of the CSS border properties.

The good news is we can! I created a tip that covers two ways it can be accomplished:

CodePen demo

Hope this helps!
Guil

13 Answers

Great Video. Welcome me a new TeamTreeHouse member :)

Very cool. Never even seen a Clip being used in CSS. Good stuff to know!

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Here are a couple of reference links for the clip property covered in the tip:

That's awesome!

Love these tips Guil! Always pick up even more than the main focus.

Brilliant .... thnx

Codepen didn't work in Safari. Background color worked - gradient didn't

Same code worked in FF.

Clip does not work on ALL browsers. Especially IE8 and down. Same thing with pseudo elements. Is there a solution for those?

Guil Hernandez
Guil Hernandez
Treehouse Teacher

John Fu, I meant all the current browsers, even though it does have partial support in IE8.

For legacy browser support, you can use Modernizr for fallbacks.

Didn't work in Safari 5.1.10

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey marsha grasett,

The only issue in Safari 5.1 is the gradient syntax. Take a look at this example, which uses the older syntax for Webkit.

thnx Gull

(I should have known that ...*faceplant)

Cheers again Guil!

Great Help, when doing a dropdown box with a small triangle.

If I wanted to add a box-shadow to all three sides or just one side of a triangle, how would I do that?

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Eric,

The box-shadow property wouldn't work well for this since it adds the shadow to the entire box. You can, however, use the new CSS drop-shadow filter, which follows the transparent areas of the box. Take a looks here.

Very nice! Thanks bud!

It helped alot :) Thank you Guil!