How a CSS Triangle is Made

http://codepen.io/chriscoyier/pen/lotjh

by zhs • 13 years ago

28 9 13 years ago

codepen.io

Raphmedia2• 13 years ago

I really like this. It's simple, but work so well. I could see a website making tutorials this way.

twodayslate• 13 years ago

That's the weirdest way to format HTML I've ever seen

wingerlang• 13 years ago

It said (jade) so it seems to be this: http://jade-lang.com/

yefim• 13 years ago

Jade is the default template language in Express (common Node web framework) so a lot of people have been picking it up.

jerrya2• 13 years ago

All of these remarkable ways to hack CSS to make different geometric shapes (semi-circles, triangles, whatever) just leave me believing there is no computer science in CSS, no engineering in CSS, just a collection of hacks to develop to an underwhelming overcomplicated underpowered spec.

Add yet another level of unneeded complexity to web work.

Jasper_2• 13 years ago

CSS is very extremely well-specified in how it draws stuff, and if you use it within its bounds, it's very good at doing what it set out to accomplish. That is, as a way to style content. It was not designed as a "draw a triangle" language, and I'm sure the original people behind the CSS standard would never have thought of exploiting the bevel effect to draw a triangle.

I don't understand the attitude of "well, you're using CSS outside the bounds of what it was designed for, that means that CSS is ad-hoc garbage", nor the attitude of "well, you're exploiting CSS in a clever way, that means you're a terrible engineer".

It's a clever hack in the truest sense of the word, and that makes me proud.

jerrya2• 13 years ago

The first five years of CSS articles were: "How I got two columns in CSS" and "How I ditched tables for two columns in CSS".

This does not make me think of CSS as a well specified standard to be used to style content in a manner needed by the web.

Raphmedia2• 13 years ago

The main issue with CSS is that you have to take old but not yet deprecated browsers into account. And even now, you have to take into account different devices, different sizes, different resolutions.

But I agree that's its not the usual language. Instead of writing words at the computer and have it compute it, you have to compute everything yourself in your head and output the script that do the display.

Things like SASS and LESS are a godsend.

How a CSS Triangle is Made

Related Stories