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:
borderand a collapsed element
- 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"/>.
from CSS-Tricks https://pineco.de/quick-tip-css-triangles/