In talks I’ve given in the past, I’ve found myself explaining how CSS triangles work with words and ridiculous hand gestures. It never goes particularly well.
So I figured let’s give it a shot with an actual on-screen in-code animation. Here we go:
See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen
The root of the trick is that borders on elements meet each other at angles. So if one is transparent and the other isn’t, it appears as if the whole shape is a triangle. You can turn “on and off” different borders and use different heights/widths to get different triangle shapes pointing different directions.
Of course you can get all kinds of crazy with CSS and only one element. The triangle is just always particularly compelling because it’s so practical.
I found myself sketching something very similar on a scrap of paper for a colleague not long ago. Such a simple concept, but remarkably hard to explain in words. This animation would have been handy
Nice post, you should do this animated stuff as often as you can as it makes it so much clearer! :) Thx!
:) , good i like!
Brillant idea, brillantly made. Nice and easy step-by-step animation. Thanks for this, I guess I will show it in my university-teachings.
Very clever. Nice demo!
Nice, I wish this was available back when I was first trying to figure this out. You make it so easy to understand. Now I feel silly for struggling with it for as long as I did.
He, simple and effective explanation. Thanks!
Thanks so much Chris. I was working with these today and my mind was having trouble processing how it was working. Your post appeared in my feed like right after I was pondering it. I feel like you’re watching me…
Great explanation…I teach HTML and CSS and explaining CSS triangles is a challenge…I will try and use this animation in the future to add a visual explanation…
Here’s a Pen I did about “CSS Arrows/Triangles Combinations” in which you can see some of the most used triangles/arrows orientations.
Awesome animation.
Bravo. I’ve not had a need for one yet, but this is a great way to explain it.
Hey thanks Chris,
This is quite a standard way of creating a css triangle.
What is more tricky is to create a css STAR!
What say guys?
Take two boxes, place them on top of each other and rotate one of the boxes 45 degrees. That should make a simple star.
See the Pen Simple CSS Star by begetolo (@begetolo) on CodePen
Or look at CSS-Tricks :)
Great Bert!, Using pseudo classes on elements did the trick. Thanks man. :-)
Don’t get me wrong, making shapes with pure CSS is a “creative” art, but I don’t know why so many people insist on using these kinds of techniques in production sites when SVG support is so ubiquitous now.
Using SVG, inline or not, means an additional request, either for <= IE8 (always), or all browsers. SVG fallback techniques add a fair amount of additional markup and considerations.
CSS triangles require no additional requests, and work equally well on IE8 and modern browsers when used on pseudo-elements – so no additional markup required.
CSS arrows can also be dynamically sized with relative units (set stroke width to an em and let the parent font size determine the size of the arrow).
I’m a big fan of using as much SVG in sites I build as is possible – but only where it is applicable. SVG for arrows is generally not optimal when they can be generated without requests or additional markup.
A good reason for using CSS is the ability to animate parts of the ‘graphic’.
Stu, I support both CSS and SVG but achieving results on just css is amazing and preferable.
I totally agree Larry on this.
I agree fallbacks are a pain.
Although in the tooltip case, if you use inline SVG (an
<svg>tag directly in your HTML), you won’t cause an extra request and can put your content in a<foreignObject>in the SVG. That naturally falls back to a box with no arrow… hardly the end of the world and still perfectly usable.You can animate SVG.
Doing this stuff with CSS is a hack. CSS isn’t designed to draw shapes… SVG is. We’re so used to hacking CSS to make up for browser failings of the past that I think we often don’t realise when we’re doing it.
Commenting in CSS is usually so poor that it’s not obvious that a convoluted set of borders, widths, heights and
:before/:afterelements are being used to create a shape. If you comment these things thoroughly then you’re a good person and I like you :-)Mind creating a Pen with what you’re saying so we can all learn?
Here’s a demo of an SVG technique using <foreignObject>: http://codepen.io/stucox/pen/JzBfe
That is brilliant! I did know how to code triangles by heart, but now I actually understand why they are what they are :)
Now i can get more creative vith them in the future (Y)
Anyone know of a way to rotate (say 10 degrees) a triangle created with this method?
transform: rotate(10deg);?Did you try that? I couldn’t make it work…
Hey Chris, just out of curiosity and now that we have more context… :) WTF were you explaining at that point in the picture? lol
Sorry, wrong post… oh boy.
Yeah, works fine for me (with Compass adding the vendor prefixes)
The animation is brilliant, thanks.
Brilliant explanation! and thanks for making it clear!
Yea, that was a great post. You should definitely do the animated thing more often.
That completely cleared up CSS triangles for me. I appreciate it
Firefox seems to make fuzzy border intersections for solid borders (first I’m seeing it). I’ve found existing bug reports addressing this as well. I guess the fix for now is to use a dotted border instead of solid http://codepen.io/Boogiesox/pen/usmFG. The only exception is the situation is reversed in IE 10, but you get a big thumbs up from Opera and Chrome on Win.
Which Windows and Firefox versions are you using?
I’m on Win7 Pro, Firefox 24.0 and both triangles look fine to me, see this screenshot
Glad you mentioned it, @Ricardo Zea. I am running the same specs, however, I restarted with the extensions disabled. Looks like one of my add-ons doesn’t quite jive with this particular situation. I don’t have much of a collection of add-ons, so I may just try and track down which one is causing the issue. Have a look at what I was seeing before disabling extensions @ http://d.pr/i/QuS5
Regardless, This was a really well-done animation that does a great job illustrating a trick that I can’t honestly say I’ve seen/used before. Must have been kinda fun to make, too.
In IE10 with full IE10 Browser and Document Mode, the top triangle looks like a rectangle to me, the bottom one looks fine.
Check it out: http://d.pr/i/9yWy
It turns out to be under Options > Advanced > Browsing > “Use hardware acceleration when available.” This appears to have been covered already @ bugzilla. Seems to be the fix for any “blurriness” or distortions in FF.
Was doing one of these tooltips just yesterday, but found I had hit area issues because the transparent borders stretch out beyond the arrow.
Got round that by using a square and rotating it 45deg instead – that way the hit area is only the visible parts:
Pen.
I’ve used this trick for a few years now, but never understood WHY it worked. Thanks for illuminating. (and animating!)
I love the way you combined unique languages to get rid of the boring set of stereotypes.
Hey Chris, just out of curiosity and now that we have more context… :) WTF were you explaining at that point in the picture? lol
Nice way to explain a very neat trick :)
I especially like how you make it fade out at the end to an example of what they can be used for.
A very educational for all users.
Useful with The Shapes of CSS.
Dude…..The parable of the css triangle shape is the coolest, easiest example I have ever seen, on top of all that, it was a cool use of codepen
really, nice way to teach….
Beautiful demo!!! Thanks a lot!!!
so simple, so good – thx
Similar trick could be used to for create circles. Cheers.