Live data from Hacker News

Animation to Explain CSS Triangles

codepen.io

61–70 of 107 posts

Re: Animation to Explain CSS Triangles

#61
post #55
post #45

Earlier quoted context omitted.

Actually I'd use SVG for that, it's even trivial to write: Should be supported pretty much everywhere canvas is, but without the need of scripting to actually get a triangle.

But that's hardly reusable. You'll have to copypaste the (completely nonobvious) markup everywhere you want a triangle. Although it might be possible to use the CSS :before pseudo-element...

SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement

Re: Animation to Explain CSS Triangles

#62
post #19

Earlier quoted context omitted.

It'd be even more awesome if you could actually make complex shapes with these triangles.

You can. It just requires absolute positioning. I can't see why you'd want to though, it's not hard enough to be fun or useful enough to be work.

And if you try this, you will usually get light segments in places where triangles forming some shape meet (due to antialiasing and overall hackery).

Re: Animation to Explain CSS Triangles

#65
post #30

Earlier quoted context omitted.

It's the only way to do it with pure CSS. A more sane approach would be to use a raster or vector image. It is pretty silly.

It is a bit insane, however this allows you to change the color, dimensions, transparency at runtime. A raster doesn't allow you to do this, and, while SVG is scriptable, browser support is spotty. This hack on the other hand will work in every browser all the way back to Netscape Navigator or earlier.

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.

Re: Animation to Explain CSS Triangles

#66
post #51

Designer: "wow this is cool" HN reader who's not a designer: "don't like, bleh CSS, should SVG, used to do that in VIM, TIMTOWTDI" and other similar useless rants missing the point.

the problem is people seeing and sharing this, thereby giving it some sort of authority. It's possible and still a dumb idea. Yet another thing front end coders have to encounter and fix after somebody else applies these kinds of embarrassing hacks.

Re: Animation to Explain CSS Triangles

#67
post #60
post #38

Earlier quoted context omitted.

Touche. The sooner people realize the web is a presentation thing the sooner we can get our sanity back. sadly, we will see some dozen iterations of 'flash' until that day finally comes. and html5 js shenanigans are only the third...

...and all those impaired people and people with old and slow devices are finally locked out of our new shiny "sane" web. The web isn't just one visual presentation layer, its a multitude of presentation layers for all kind of people and that demands some compromise.

That seems like a false dichotomy. Why should a nice graphic layer immediately exclude everything else?

Re: Animation to Explain CSS Triangles

#68
post #30

Earlier quoted context omitted.

It is a bit insane, however this allows you to change the color, dimensions, transparency at runtime. A raster doesn't allow you to do this, and, while SVG is scriptable, browser support is spotty. This hack on the other hand will work in every browser all the way back to Netscape Navigator or earlier.

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.

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

Re: Animation to Explain CSS Triangles

#70
post #61
post #55

Earlier quoted context omitted.

But that's hardly reusable. You'll have to copypaste the (completely nonobvious) markup everywhere you want a triangle. Although it might be possible to use the CSS :before pseudo-element...

SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement

I can't stand the w3 docs sometimes. After reading that section about `symbol`, I still have no clue what it is or how to use it.
Post reply on HN