I'm the only one here that although thinks it is a cool presentation fells sad about how a triangle needs to be described as a very broken rectangle?
A lot about CSS is sad.
yet we have no alternatives for CSS.
Animation to Explain CSS Triangles
41–50 of 107 posts
Re: Animation to Explain CSS Triangles
#42I'm sorry, I have very little experience with web design, but is this the supposed way to create a triangle? It seems weird there would be no way to build shapes with primitives.
Isn't it kinda degrading that while designing CSS no-one came up with the idea that people would like to have a triangle from time to time?
Re: Animation to Explain CSS Triangles
#43I'm sorry, I have very little experience with web design, but is this the supposed way to create a triangle? It seems weird there would be no way to build shapes with primitives.
It's just a hack. If you want to create a triangle you'll either draw it on a CANVAS or use SVG. You just cant for instance, put a text in a triangle easily with CSS today(at least in a cross-browser way).
Sure you can - you just write it in another DIV, positioned above your triangle. Or did I misunderstand you?
The beauty for me is not in the hack itself though, it is in the way it is presented - I adore the simplicity of this approach. Kudos!
Re: Animation to Explain CSS Triangles
#44Earlier quoted context omitted.
I really hope you're being sarcastic. Sometimes these things have a way of whooshing over my head...
Why would he be when it's mostly cross-browser? It means you dont need to draw the triangle and throw it into a .png or your sprite then deal with all that crap. You have a triangle that you can use to point at things AND you can modify the borders to change the size of that triangle on the fly. Yay.
Yeah. But that's just a simple, freaking right triangle. Why all the hoop-jumping?
Re: Animation to Explain CSS Triangles
#45I vote we change the name from CSS to PWL. PWL is, of course, Puzzle Web Language. This is what I hate about CSS: it's a jigsaw puzzle that must be brute-forced. The fact that this exists and is lauded as clever rather than being ridiculed for its opaqueness really gets my goat.
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:
Re: Animation to Explain CSS Triangles
#46I'm sorry, I have very little experience with web design, but is this the supposed way to create a triangle? It seems weird there would be no way to build shapes with primitives.
Isn't it kinda degrading that while designing CSS no-one came up with the idea that people would like to have a triangle from time to time?
Back then there were images for that; later there was SVG. Triangles with CSS don't actually solve a problem CSS intended to solve.
Re: Animation to Explain CSS Triangles
#47Earlier quoted context omitted.
It's just a hack. If you want to create a triangle you'll either draw it on a CANVAS or use SVG. You just cant for instance, put a text in a triangle easily with CSS today(at least in a cross-browser way).
Sure you can - you just write it in another DIV, positioned above your triangle. Or did I misunderstand you? The beauty for me is not in the hack itself though, it is in the way it is presented - I adore the simplicity of this approach. Kudos!
Well, then the text isn't really "in" the triangle, is it? Leading you to rely on further hacks to make sure the text stays in the triangle with a nice padding, correct wrapping, and all the other features you get when text is really inside a container.
Re: Animation to Explain CSS Triangles
#48Earlier quoted context omitted.
Isn't it kinda degrading that while designing CSS no-one came up with the idea that people would like to have a triangle from time to time?
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.
Re: Animation to Explain CSS Triangles
#49Earlier quoted context omitted.
It's just a hack. If you want to create a triangle you'll either draw it on a CANVAS or use SVG. You just cant for instance, put a text in a triangle easily with CSS today(at least in a cross-browser way).
Sure you can - you just write it in another DIV, positioned above your triangle. Or did I misunderstand you? The beauty for me is not in the hack itself though, it is in the way it is presented - I adore the simplicity of this approach. Kudos!
Usually I use a :after or :before for the triangle.
#box { position: relative } #box:after {position: absolute; top: -10px; left: 45%; ... }
Re: Animation to Explain CSS Triangles
#50Earlier quoted context omitted.
Really? I started out doing CSS, and I still love it 10 years later. Sure, it has its quirks, but now that we have tools like SASS, it makes CSS so much more fun all over again.
I envy you, then, 'cause I freaking hate it. SASS and LESS provide really nice language improvements, but they don't fix all the crap about box models and positioning and polyfills and byzantine precedence rules and the necessity for silly hacks like this. It's just too complicated and painful to make things look the way you want them to look, which is the point of CSS. I've gotten pretty good at it and I've come to…
I'm with you. Anyone who says CSS is A-OK doesnt understand it fully or doesnt have the imagination for something better to replace it. It's really the most shite language I've ever had to deal with.
That's the thing though, we have to deal with it. I don't get why there isn't just a complete replacement trending on HN every other month. Sure, it needs browser support and it would forgo a lot of the CSS-specific optimizations baked into the browsers but there has to be a more efficient way to handle the DOM.