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
border
and 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!