I like Adam Laki’s Quick Tip: CSS Triangles because it covers that ubiquitous fact about front-end techniques: there are always many ways to do the same thing. In this case, drawing a triangle can be done:
- with
borderand a collapsed element - with
clip-path: polygon() - with
transform: rotate()andoverflow: hidden - with glyphs like ▼
I’d say that the way I’ve typically done triangles the most over the years is with the border trick, but I think my favorite way now is using clip-path. Code like this is fairly clear, understandable, and maintainable to me: clip-path: polygon(50% 0, 0 100%, 100% 100%); Brain: Middle top! Bottom right! Bottom left! Triangle!
My 2nd Place method goes to an option that didn’t make Adam’s list: inline <svg>! This kind of thing is nearly just as brain-friendly: <polygon points="0,0 100,0 50,100"/>.
Any tips on adding a shadow when the triangle is part of a larger tooltip/bubble pattern? Getting the shadow on both the triangle and the box always feels trickier than it should.
Hey Mike! Have tried using the
drop-shadow()CSS filter? Browser support isn’t 100%, but might be a good start: https://css-tricks.com/breaking-css-box-shadow-vs-drop-shadow/Thanks Geoff!