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]
Animation to Explain CSS Triangles
31–40 of 107 posts
Re: Animation to Explain CSS Triangles
#32Earlier 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…
Re: Animation to Explain CSS Triangles
#33Sweet. 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.
Re: Animation to Explain CSS Triangles
#34Re: Animation to Explain CSS Triangles
#35Re: Animation to Explain CSS Triangles
#36Note: 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; }
.triangle-down {
border: 1em solid transparent;
border-top-color: #444;
}Re: Animation to Explain CSS Triangles
#37Anyway, 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
#38I'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.
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
#39At 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
#40Earlier 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.
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.)