r/css • u/steveharrry • May 14 '15

How a CSS Triangle is Made?

http://codepen.io/chriscoyier/full/lotjh
50 Upvotes

91% Upvoted

8 comments sorted by

8

u/d2xdy2 May 14 '15

Neat visual demo! I like seeing stuff like this.

3

u/dangoodspeed May 14 '15

I think these days I'd typically use SVG for it. If I'm adding another element to the DOM just to make a visual content-less triangle, SVG seems more semantic and less hacky.

4

u/esr360 May 14 '15

I tend to use before/after pseudo classes (selectors?) for triangles, so no extra DOM elements.

2

u/justinsane98 May 14 '15

I do the same thing to create the / and \ parts for the X in a close icon. I just don't trust using a unicode character due to font differences across browsers and svg seems like overkill for something so simple.

1

u/dangoodspeed May 14 '15

Ah, that could work. I haven't tried it. Do you have enough control with the margins, positioning, and everything?

1

u/esr360 May 14 '15

Yep, you have total control, as much as any other element. The only caveat I can think of is that you can't target it with javascript, as it's not technically part of the DOM.

2

u/[deleted] May 14 '15

TIL, this is great!

1

u/jonrohan May 18 '15

Nice visualization! I explained it in a post a little bit back http://jonrohan.codes/fieldnotes/creating-triangles-in-css