Live data from Hacker News

Animation to Explain CSS Triangles

codepen.io

31–40 of 107 posts

Re: Animation to Explain CSS Triangles

#31
post #27
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]

width and height are automatically 0 if the element is inline (i.e. a span) or absolutely positionrf (which is usually true for these kinds of triangles)

Re: Animation to Explain CSS Triangles

#32
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…

It's not a hack, margin: 0 auto is how you tell a non-table element to center itself. Sure, there's some oddities to CSS, but if you understand the box model it's not that foreign.

Re: Animation to Explain CSS Triangles

#33
post #19
post #4

Sweet. Thanks for making this. It'd be awesome if you could extend the animation and show examples of complex shapes you could make with triangles.

It'd be even more awesome if you could actually make complex shapes with these triangles.

You can. It just requires absolute positioning. I can't see why you'd want to though, it's not hard enough to be fun or useful enough to be work.

Re: Animation to Explain CSS Triangles

#36
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; }

A little more concise:

  .triangle-down {
    border: 1em solid transparent;
    border-top-color: #444;
  }

Re: Animation to Explain CSS Triangles

#37
At YOW Australia 2012, Brian Beckman and Erik Meijer gave an entertaining presentation about 'The Story of the Teapot in HTML'. I thought it was going to culminate in a 3d animation of a teapot in a browser using Javascript and CSS triangles, but they didn't get that far.

Anyway, here's a link to the video: http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot...

Re: Animation to Explain CSS Triangles

#38
post #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.

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

Re: Animation to Explain CSS Triangles

#39

At YOW Australia 2012, Brian Beckman and Erik Meijer gave an entertaining presentation about 'The Story of the Teapot in HTML'. I thought it was going to culminate in a 3d animation of a teapot in a browser using Javascript and CSS triangles, but they didn't get that far. Anyway, here's a link to the video: http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot...

This trick is as old as the dHTML. Adding some triangulation algorithms you have a fun 3D ending engine.

Re: Animation to Explain CSS Triangles

#40

Earlier quoted context omitted.

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.

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 care a lot about how it works (e.g. this little visualization is a really nice demonstration), but this state of affairs saddens me; I wish I could concentrate on other stuff, and not how to make a goddamn triangle.

(At some level of technical hair-splitting, this isn't per-se CSS's fault and is more general DOM crapiness, but that distinction is largely irrelevant. They're still problems I'm expected to solve with CSS.)

Post reply on HN