Grow your CSS skills. Land your dream job.

Animation of How CSS Triangles Work

Published by Chris Coyier

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.


Y'all got that?

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.

Comments

  1. 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

  2. Permalink to comment#

    Nice post, you should do this animated stuff as often as you can as it makes it so much clearer! :) Thx!

  3. :) , good i like!

  4. Brillant idea, brillantly made. Nice and easy step-by-step animation. Thanks for this, I guess I will show it in my university-teachings.

  5. Alex Goretoy
    Permalink to comment#

    Very clever. Nice demo!

  6. 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.

  7. He, simple and effective explanation. Thanks!

  8. 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…

  9. 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…

  10. 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.

  11. Permalink to comment#

    Bravo. I’ve not had a need for one yet, but this is a great way to explain it.

  12. 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?

  13. Permalink to comment#

    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.

    • Bert de Vries
      Permalink to comment#

      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.

    • Permalink to comment#

      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 / :after elements 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?

    • Permalink to comment#

      Here’s a demo of an SVG technique using <foreignObject>: http://codepen.io/stucox/pen/JzBfe

  14. 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)

  15. Bert de Vries
    Permalink to comment#

    Anyone know of a way to rotate (say 10 degrees) a triangle created with this method?

  16. The animation is brilliant, thanks.

  17. Permalink to comment#

    Brilliant explanation! and thanks for making it clear!

  18. Kraemon
    Permalink to comment#

    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

  19. Eric Gregoire
    Permalink to comment#

    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

    • Eric Gregoire
      Permalink to comment#

      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

    • Eric Gregoire
      Permalink to comment#

      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.

  20. 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.

  21. Zymara
    Permalink to comment#

    I’ve used this trick for a few years now, but never understood WHY it worked. Thanks for illuminating. (and animating!)

  22. AndrewPham
    Permalink to comment#

    I love the way you combined unique languages to get rid of the boring set of stereotypes.

  23. Hey Chris, just out of curiosity and now that we have more context… :) WTF were you explaining at that point in the picture? lol

  24. Ryan
    Permalink to comment#

    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.

  25. Nelson Hereveri
    Permalink to comment#

    A very educational for all users.

    Useful with The Shapes of CSS.

  26. Sam Brody
    Permalink to comment#

    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

  27. manoj
    Permalink to comment#

    really, nice way to teach….

  28. Beautiful demo!!! Thanks a lot!!!

  29. Permalink to comment#

    so simple, so good – thx

  30. Omar
    Permalink to comment#

    Similar trick could be used to for create circles. Cheers.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".