Animation to Explain CSS Triangles • Hacker News Board

Re: Animation to Explain CSS Triangles

#21

Post by JungleGymSam » Tue, Oct 08, 2013, 3:16 AM UTC

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

Re: Animation to Explain CSS Triangles

#22

Post by twanlass » Tue, Oct 08, 2013, 3:24 AM UTC

Ahhh the hatin' HN crowd. For what it's worth - I've built this bit of CSS over and over but seeing so uniquely presented was great. Thanks for that.

Re: Animation to Explain CSS Triangles

#23

Post by jabo » Tue, Oct 08, 2013, 3:25 AM UTC

JungleGymSam wrote: post #21

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

Re: Animation to Explain CSS Triangles

#24

Post by jabo » Tue, Oct 08, 2013, 3:27 AM UTC

donutdan4114 wrote: post #8

silveira wrote: post #7

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.

A lot about CSS is sad indeed. But this demo actually does a good job of explaining a common CSS hack.

Re: Animation to Explain CSS Triangles

#25

Post by icambron » Tue, Oct 08, 2013, 3:32 AM UTC

solistice wrote: post #20

babby wrote: post #17

Earlier quoted context omitted.

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.

I'm currently learning CSS, and it really all seems like dirty hacks to me. margin: o auto;? So I can't tell this to just horizontally center itself automatically? Don't get me wrong, I love dirty hacks, just not if they're forced onto me. I guess in a couple of weeks stockholm syndrome will set in, and I'll love it, but for the beginner, especially if you're moving there from either design (What, I need to hack thin…

I don't know any developers who like CSS. It's just a thing we have to do.

Re: Animation to Explain CSS Triangles

#26

Post by javajosh » Tue, Oct 08, 2013, 3:47 AM UTC

Man, this is a powerful teaching technique - I knew all this, but I don't think I really really understood it until just now. I hope more people start writing animated explanations for web stuff. Maybe someone could do one for CSS menu systems or side bar, sticky footer, type stuff. Or even the Bootstrap grid system.

Re: Animation to Explain CSS Triangles

#27

Post by [deleted] » Tue, Oct 08, 2013, 3:56 AM UTC

babby wrote: post #18

Note: You only need to specify 3 borders. Eg. a triangle pointing down: .triangle-down { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #444; }

[deleted]

Re: Animation to Explain CSS Triangles

#28

Post by amwelles » Tue, Oct 08, 2013, 4:01 AM UTC

icambron wrote: post #25

solistice wrote: post #20

Earlier quoted context omitted.

I'm currently learning CSS, and it really all seems like dirty hacks to me. margin: o auto;? So I can't tell this to just horizontally center itself automatically? Don't get me wrong, I love dirty hacks, just not if they're forced onto me. I guess in a couple of weeks stockholm syndrome will set in, and I'll love it, but for the beginner, especially if you're moving there from either design (What, I need to hack thin…

I don't know any developers who like CSS. It's just a thing we have to do.

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.

Re: Animation to Explain CSS Triangles

#29

Post by scottcanoni » Tue, Oct 08, 2013, 4:02 AM UTC

Now animate this using a border with an inner color like this:

http://cssarrowplease.com/

Re: Animation to Explain CSS Triangles

#30

Post by ux-app » Tue, Oct 08, 2013, 4:08 AM UTC

artursapek wrote: post #11

kmm wrote: post #9

I'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 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.