Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Animation to Explain CSS Triangles

codepen.io

Post reply on HN
Print view View original

81–90 of 107 posts

Re: Animation to Explain CSS Triangles

#81

Post by lambda »

viggity wrote: post #80
tinco wrote: post #77

Earlier quoted context omitted.

No, making a shape in CSS is silly. CSS is for styling not drawing. If you want to make a triangle, without an additional (unnecessary) HTTP request, you should use the appropriate web tech which is SVG. Just like all other resources you can easily embed an SVG in your HTML if you're being stingy on the requests (which is a good thing).

not all browsers support SVG (namely IE8). for folks who have to support LOB, this is still an issue.

Sure, you can treat this as a hack to support older browsers. But with modern browsers, or once those older browsers fall to low enough market share, just embed SVG.

Re: Animation to Explain CSS Triangles

#82

Post by psychometry »

tinco wrote: post #77
psychometry wrote: post #74

Earlier quoted context omitted.

No, having to open an image editor to create a simple shape you can make in CSS is silly. So is an additional, unnecessary HTTP request.

No, making a shape in CSS is silly. CSS is for styling not drawing. If you want to make a triangle, without an additional (unnecessary) HTTP request, you should use the appropriate web tech which is SVG. Just like all other resources you can easily embed an SVG in your HTML if you're being stingy on the requests (which is a good thing).

Back in the real world, however, we can't use the ideal solution every time because of browser support. Thus, the easiest, most flexible option is CSS.

Re: Animation to Explain CSS Triangles

#83

Post by phaer »

dsego wrote: post #67
phaer wrote: post #60

Earlier quoted context omitted.

...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?

It is not, if you frame it like that. But my parent claimed implicitly that the w3c needs to see the web as a pure presentational layer. I have nothing against graphical layers, but a semantic web should stay priority #1 if you ask me.

Also: A lot of the shiny new web apps developed during the last few years are unusable with screen readers and/or on low end devices. As long as we can have graceful degradation, i have nothing against more graphical aspects.

Re: Animation to Explain CSS Triangles

#84

Post by psychometry »

kalleboo wrote: post #68
michaelbuddy wrote: post #65

Earlier quoted context omitted.

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.

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

Re: Animation to Explain CSS Triangles

#85

Post by kamakazizuru »

I find it depressing how most of CSS related drawing is basically all just hacks. I saw the same a few weeks ago when someone posted a bunch of different CSS shapes - the code behind it was the most unintuitive stuff. It's like saying - here's a bicycle - now lets get another one and weld it together in some ugly way and make a car out of it. I dont understand why CSS / Browsers have not come far enough to natively support basic shapes? Surely if we can make self-driving cars - rendering things in browsers should be simpler? (yes I am aware of SVG & Canvas - but they dont work everywhere - dont get why the good folks at google , ms & mozilla cant get together and agree that the web shouldnt be full of ugly hacks masquerading as stylesheets).

Re: Animation to Explain CSS Triangles

#86

Post by lambda »

psychometry wrote: post #82
tinco wrote: post #77

Earlier quoted context omitted.

No, making a shape in CSS is silly. CSS is for styling not drawing. If you want to make a triangle, without an additional (unnecessary) HTTP request, you should use the appropriate web tech which is SVG. Just like all other resources you can easily embed an SVG in your HTML if you're being stingy on the requests (which is a good thing).

Back in the real world, however, we can't use the ideal solution every time because of browser support. Thus, the easiest, most flexible option is CSS.

It's not really the most flexible option. It allows you to make only a fairly limited type of triangle, only pointing in one of eight directions.

If you want compatibility with older versions of IE, use both SVG and VML, depending on the browser (VML for IE 8 and earlier, SVG for everything else). This gives you a lot more flexibility (you can draw any polygon, arc, or bezier curve that you want), and compatibility all the way back to IE 5.

Re: Animation to Explain CSS Triangles

#87

Post by alanctgardner2 »

kamakazizuru wrote: post #85

I find it depressing how most of CSS related drawing is basically all just hacks. I saw the same a few weeks ago when someone posted a bunch of different CSS shapes - the code behind it was the most unintuitive stuff. It's like saying - here's a bicycle - now lets get another one and weld it together in some ugly way and make a car out of it. I dont understand why CSS / Browsers have not come far enough to natively s…

There shouldn't be any CSS-related drawing. Full-stop. Your analogy is accidentally very accurate, because it's like looking at a car, then a pile of bicycles, and saying "how can I get from A to B". The sane person would go to an auto parts store, get the appropriate parts and build a car as we understand it. The madman would weld two bicycles together, and then complain that it wasn't intuitive to do - bicycles aren't supposed to be used for creating cars. Likewise, CSS is not for drawing shapes: it's for styling things. As you pointed out, we have canvas and SVG for drawing, plus images for things like icons.

As for the compatibility thing, you're coming at it the wrong way. Don't tell Google et al. to support yet another standard for CSS shapes. Let them spend their time implementing SVG and Canvas according to the existing spec. Inventing a new spec not only doesn't solve the problem, it actually re-introduces it.

Re: Animation to Explain CSS Triangles

#88

Post by alanctgardner2 »

dingdingdang wrote: post #58

Honestly, why is there no basic web drawing app out there that exports to CSS? Should be doable and hence done.

> Should be doable and hence done.

OK, that's it everybody. Trying to do something? Is it done yet? Nope? Pack it in. All the things have been done.

Re: Animation to Explain CSS Triangles

#89

Post by jack-r-abbit »

lambda wrote: post #86
psychometry wrote: post #82

Earlier quoted context omitted.

Back in the real world, however, we can't use the ideal solution every time because of browser support. Thus, the easiest, most flexible option is CSS.

It's not really the most flexible option. It allows you to make only a fairly limited type of triangle, only pointing in one of eight directions. If you want compatibility with older versions of IE, use both SVG and VML, depending on the browser (VML for IE 8 and earlier, SVG for everything else). This gives you a lot more flexibility (you can draw any polygon, arc, or bezier curve that you want), and compatibility a…

I'm racking my brain trying to see the 8 directions. I only see 4: up, down, left & right. Care to explain the other 4?

Re: Animation to Explain CSS Triangles

#90

Post by lambda »

jack-r-abbit wrote: post #89
lambda wrote: post #86

Earlier quoted context omitted.

It's not really the most flexible option. It allows you to make only a fairly limited type of triangle, only pointing in one of eight directions. If you want compatibility with older versions of IE, use both SVG and VML, depending on the browser (VML for IE 8 and earlier, SVG for everything else). This gives you a lot more flexibility (you can draw any polygon, arc, or bezier curve that you want), and compatibility a…

I'm racking my brain trying to see the 8 directions. I only see 4: up, down, left & right. Care to explain the other 4?

Got it from here: http://apps.eky.hk/css-triangle-generator/

Here's a series of examples showing how it works (not a fun animation like the OP, but a little easier to follow): http://jsfiddle.net/X8gXS/

Basically, you can get any triangle as long as at least one of the sides is horizontal or vertical.

Post reply on HN