On: Animation to Explain CSS Triangles

[michaelbuddy]

Better to use Arial unicode characters like &#x25B2 or &#x25BC ASCII encodings and UTF-8 More logical and you can apply all the text styling like color, shadows, skewing, rotate, jquery prepends etc. Put it inside a div and it can go it wherever you want. And it wouldn't be a hack. Some hacks are awesome.. and others are nice playful things but not to be taken with any kind of serious inquiry.

[kalleboo → michaelbuddy]

Positioning that accurately would be a massive nightmare due to font rendering differences between OSes and browsers.

[psychometry → kalleboo]

I've found that right combination of display: inline-block, position: relative, positioning and margins will get it where you need every time.

[cheald → psychometry]

What happens when a user agent overrides your preferred font size?

[SiVal → cheald]

Serious problem. I usually have my page magnification jacked up to reduce eye strain, and it's amazing how many things go wrong on the pages I browse. Don't use a clever hack without testing how it looks after a few cmd-+ (ctrl-+) resizings.

[psychometry → cheald]

Just don't use font-size and line-heights that references pixels for the <span> containing your arrow and you should be fine. It might not be perfectly aligned, but it won't break.