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.
Animation to Explain CSS Triangles
51–60 of 107 posts
Re: Animation to Explain CSS Triangles
#52Now animate this using a border with an inner color like this: http://cssarrowplease.com/
That's essentially doing the same trick twice, only with a slightly larger version that matches the border color of the box and is positioned behind the smaller triangle.
Re: Animation to Explain CSS Triangles
#53Earlier quoted context omitted.
Back then there were images for that; later there was SVG. Triangles with CSS don't actually solve a problem CSS intended to solve.
Back then there were images for borders and even images for padding. CSS solved that. If you add borders why can't you add triangles as well? SVG would be awesome if it could be freely intermixed with HTML. I think I'd ditch HTML for everything other than text boxes and forms.
I haven't seen border images in the wild since CSS added them, I think (apart from examples). Perhaps that was solving a 1998 use-case in 2008. Nevertheless, CSS is still based on styling runs of text and boxes of content. Boxes usually aren't triangular.
As for HTML in SVG, there is foreignObject [4.72], but browser support is spotty in places. And wrapping text in arbitrary shapes is on the roadmap for SVG 2, if I remember correctly. But we'll be a bit older when that's universally implemented ;-)
[4.72] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
Re: Animation to Explain CSS Triangles
#54Simple, elegant and to the point. Give me more stuff like this.
Re: Animation to Explain CSS Triangles
#55Earlier quoted context omitted.
The reason this is clever is because CSS wasn't intended to be used to draw shapes. You would use HTML5's canvas element to do that. Instead this shows how you can hack a simple border property to make a DOM element look like a triangle.
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...
Re: Animation to Explain CSS Triangles
#56Earlier quoted context omitted.
Back then there were images for borders and even images for padding. CSS solved that. If you add borders why can't you add triangles as well? SVG would be awesome if it could be freely intermixed with HTML. I think I'd ditch HTML for everything other than text boxes and forms.
I haven't seen border images in the wild since CSS added them, I think (apart from examples). Perhaps that was solving a 1998 use-case in 2008. Nevertheless, CSS is still based on styling runs of text and boxes of content. Boxes usually aren't triangular. As for HTML in SVG, there is foreignObject [4.72], but browser support is spotty in places. And wrapping text in arbitrary shapes is on the roadmap for SVG 2, if I…
Border images are great for making resizable buttons. I've used them often in places where support is guaranteed (e.g., Chrome extensions).
Re: Animation to Explain CSS Triangles
#57▼ ◀ ▶ ▲
Some more - http://www.fileformat.info/info/unicode/block/geometric_shap...
Re: Animation to Explain CSS Triangles
#58Honestly, why is there no basic web drawing app out there that exports to CSS? Should be doable and hence done.
Re: Animation to Explain CSS Triangles
#59Earlier quoted context omitted.
Back then there were images for that; later there was SVG. Triangles with CSS don't actually solve a problem CSS intended to solve.
Back then there were images for borders and even images for padding. CSS solved that. If you add borders why can't you add triangles as well? SVG would be awesome if it could be freely intermixed with HTML. I think I'd ditch HTML for everything other than text boxes and forms.
Where does it stop though? Should CSS provide solutions for polygons too? I think borders are a legitimate styling issue that CSS rightly solves, if only for styling tables. I'm not sure that it's CSS's job to create shapes as well - that, in my mind, is definitely the role of images or SVG.
Re: Animation to Explain CSS Triangles
#60Earlier quoted context omitted.
But you don't need triangles, they're not semantic, just ask W3C.
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.