Live data from Hacker News

Animation to Explain CSS Triangles

codepen.io

11–20 of 107 posts

Re: Animation to Explain CSS Triangles

#11
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.

Re: Animation to Explain CSS Triangles

#13
post #12

Does this mean if you create a 100px high triangle, it has 100px of invisible padding on top?

No. If you take the example animation, you can set border-left-color and border-right-color to transparent, and set border-top-width to 0. This will place the triangle in a bounding box of the correct width and height.

Re: Animation to Explain CSS Triangles

#14
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.

But you don't need triangles, they're not semantic, just ask W3C.

Re: Animation to Explain CSS Triangles

#15
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?

I disagree. It would be sad if a triangle couldn't be created in CSS at all.

In fact, I think it's awesome that a triangle can be created from a "very broken rectangle", along with many other hacks that make this simple language quite powerful.

Re: Animation to Explain CSS Triangles

#16
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?

I disagree. It would be sad if a triangle couldn't be created in CSS at all. In fact, I think it's awesome that a triangle can be created from a "very broken rectangle", along with many other hacks that make this simple language quite powerful.

I really hope you're being sarcastic. Sometimes these things have a way of whooshing over my head...

Re: Animation to Explain CSS Triangles

#17

Earlier quoted context omitted.

I disagree. It would be sad if a triangle couldn't be created in CSS at all. In fact, I think it's awesome that a triangle can be created from a "very broken rectangle", along with many other hacks that make this simple language quite powerful.

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.

Re: Animation to Explain CSS Triangles

#20
post #17

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

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 things to get this typography display right?), or programming (What, I need to learn a whole bag of tricks to get the site to style properly?), CSS seems like that dirty pimp down the street to you. Yeah, he's fabulous, but he always wants you to do tricks for him.

Post reply on HN