CSS Triangles, Multiple Ways
Publikováno: 5.3.2019
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 … Read article
The post CSS Triangles, Multiple Ways appeared first on CSS-Tricks.
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"/>.
Direct Link to Article — Permalink
The post CSS Triangles, Multiple Ways appeared first on CSS-Tricks.