Animation to Explain CSS Triangles

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.

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.

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&#x27;s a jigsaw puzzle that must be brute-forced.<p>The fact that this exists and is lauded as clever rather than being ridiculed for its opaqueness really gets my goat.

▼ ◀ ▶ ▲<p>Some more - <a href="http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm" rel="nofollow">http:&#x2F;&#x2F;www.fileformat.info&#x2F;info&#x2F;unicode&#x2F;block&#x2F;geometric_shap...</a>

I&#x27;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?

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

At YOW Australia 2012, Brian Beckman and Erik Meijer gave an entertaining presentation about &#x27;The Story of the Teapot in HTML&#x27;. 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&#x27;t get that far.<p>Anyway, here&#x27;s a link to the video: <a href="http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot-in-html-by-brian-beckman-and-erik-meijer-1266" rel="nofollow">http:&#x2F;&#x2F;yow.eventer.com&#x2F;yow-2012-1012&#x2F;the-story-of-the-teapot...</a>

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

Now animate this using a border with an inner color like this:<p><a href="http://cssarrowplease.com/" rel="nofollow">http:&#x2F;&#x2F;cssarrowplease.com&#x2F;</a>

I find it depressing how most of CSS related drawing is basically all just hacks. I saw the same a few weeks ago when someone posted a bunch of different CSS shapes - the code behind it was the most unintuitive stuff. It&#x27;s like saying - here&#x27;s a bicycle - now lets get another one and weld it together in some ugly way and make a car out of it. I dont understand why CSS &#x2F; Browsers have not come far enough to natively support basic shapes? Surely if we can make self-driving cars - rendering things in browsers should be simpler? (yes I am aware of SVG &amp; Canvas - but they dont work everywhere - dont get why the good folks at google , ms &amp; mozilla cant get together and agree that the web shouldnt be full of ugly hacks masquerading as stylesheets).

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

Reminded me of good old one: <a href="http://www.designdetector.com/tips/3DBorderDemo2.html" rel="nofollow">http:&#x2F;&#x2F;www.designdetector.com&#x2F;tips&#x2F;3DBorderDemo2.html</a> For other cool abuse of CSS see <a href="http://cssdeck.com/labs/creating-single-element-iphone-using-css3" rel="nofollow">http:&#x2F;&#x2F;cssdeck.com&#x2F;labs&#x2F;creating-single-element-iphone-using...</a>

I wish all CSS was described this way... Thanks!

Very cool!<p>I always knew how it worked but it was nice to see the animation play out.

Somehow I&#x27;m tempted to click the &quot;report abuse&quot; button.

I had no idea. Thanks for the very cool animation&#x2F;explanation. A+

Honestly, why is there no basic web drawing app out there that exports to CSS? Should be doable and hence done.

I always sort of wondered about this, but I never got around to investigating it. Thanks for the lesson.

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

Simple, elegant and to the point. Give me more stuff like this.

Designer: <i>&quot;wow this is cool&quot;</i><p>HN reader who&#x27;s not a designer: <i>&quot;don&#x27;t like, bleh CSS, should SVG, used to do that in VIM, TIMTOWTDI&quot;</i> and other similar useless rants missing the point.