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
Guil Hernandez
Treehouse TeacherForum 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:
Hope this helps!
Guil
13 Answers
codelikejesus
6,107 PointsGreat Video. Welcome me a new TeamTreeHouse member :)
Adam Moore
15,825 PointsVery cool. Never even seen a Clip being used in CSS. Good stuff to know!
Brian Hernandez
20,285 PointsThat's awesome!
Zac Gordon
Treehouse Guest TeacherAwesome tip Guil Hernandez !
Paul Yorde
10,497 PointsLove these tips Guil! Always pick up even more than the main focus.
marsha grasett
9,995 PointsBrilliant .... thnx
Codepen didn't work in Safari. Background color worked - gradient didn't
Same code worked in FF.
John Fu
2,209 PointsClip does not work on ALL browsers. Especially IE8 and down. Same thing with pseudo elements. Is there a solution for those?
Guil Hernandez
Treehouse TeacherJohn 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.
marsha grasett
9,995 PointsDidn't work in Safari 5.1.10
Guil Hernandez
Treehouse TeacherHey 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.
marsha grasett
9,995 Pointsthnx Gull
(I should have known that ...*faceplant)
Sam Lillicrap
12,127 PointsCheers again Guil!
Jayson Benavides
233 PointsGreat Help, when doing a dropdown box with a small triangle.
Eric Kidwell
12,327 PointsIf 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
Treehouse TeacherHey 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.
Eric Kidwell
12,327 PointsVery nice! Thanks bud!
Mohamed Ookiyo
22,714 PointsIt helped alot :) Thank you Guil!