The moment your code begins to look like this

   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);

you know that it's time to either drop the vendor prefix or to hope that there will not be another browser vendor implementing the exact same functionality and again protect it behind a prefix.

I know that technically, the transform specs are not finalized, but considering this kind of consensus (even IE seems to agree), would it even be wise to change the spec again?

Technically, browsers are supposed to drop the prefixes when the spec reaches Candidate Recommendation.

The moment before your code looks like this, you use Sass.

I think it's nice to see. It means the spec is probably pretty close to being finalized, because in order for that to happen, there needs to be at least two browser implementations.

The moment your code begins to look like this, you know that it's time to use SASS mixins / Compass :)

They had me at the heart but then the infinity blew my mind.

For the record it works in what's now the "old" Firefox 3.6 (Firefox 6 final is out in 4 days)

Everything made of triangles works in IE8 (ie. star and pentagon work).

Unfortunately IE6 does not support background:transparent but if you know what solid background color you do want, you can fake it.

If I remember correctly there is also a way to fake the transparency in IE6 with a chromakey and filter. You basically make the parts you want transparent a crazy color like bright pink and then have the filter make that color transparent. Almost not worth the effort anymore though.

Note that the boxes with the source of the css are editable. Makes much easier to edit out parts and see how they are done.

How much money would HN save in bandwidth from changing the voting arrow images grayarrow.gif and graydown.gif (both 111b) to two small triangles in CSS as shown in this story? Or would it cost them more to even change to the css-style arrows? Also -- correct me if I'm wrong here -- why doesn't HN use one sprite image instead of serving up the images everytime separately for each story and comment? Probably because it's cached the two small arrows from the beginning so there's very little resources used anyways?

▲ or just use characters. Most of the shapes created by the CSS examples are already available as characters. ♡ ∞ ◆

HN markup is pretty inefficient anyway.

They will lose money:

  #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

is 143 bytes.

It would cut out two web requests too.

"data:" URLs are pretty good for this too, no web request needed. See RFC2397.

I've been using these a bit lately for little icons and such, I think its a cleaner approach than spriting in a lot of cases. I put a little script to generate data URLs up at http://nick.zoic.org/art/etc/make-data-url.html

How good is cross-platform Unicode support these days? I do like the idea of just using characters which look like icons, even if it does feel a bit like writing MS-DOS TUIs with box-drawing characters :-).

Can anyone explain the infinity sign? I can follow all of the other shapes.

It's two squares, each with three rounded corners and one point, rotated +/- 45 degrees to point at each other.

maybe this picture will help: http://picbin.posterous.com/private/itGyiJrIJo

The :before and :after add one element of 60px x 60px on each side of the original element.

"border: 20px solid red;" and "border-radius: 50px 50px 0 50px;" makes these elements' border round on three sides and square on the bottom right. (of bottom left for the :after element)

"transform: rotate(-45deg);" and "transform: rotate(45deg);" turn the two elements so that their square corner meet in the middle, leaving one loop on each side.

The infinity sign caught me as the most interesting and apparently complex, but I love how simple the solution is

It reminds me about the importance of knowing geometry :-)

Do the people who come up with this syntax spend their whole lives trying to make it as unintuitive as possible?

CSS is designed for typography and layout. It was never designed to render arbitrary geometric shapes - something like SVG should be used for that. This is just clever hacks pushing the box model to its limit.

I don't think that "it was never designed to" and what you should do with a technology necessarily go together. A lot of innovation comes from doing things with technology that it was not originally designed to do. You should be aware that you are beyond the intended purpose, but you should not let that stop you.

Yes, a thousand times yes. I assure you that in the 1970s engineers were telling each other that using 8-bit microprocessors to build “toy” computers was outside of their intended purpose.

It was just an explanation of why the CSS syntax in the examples is ugly. By all means hack away.

The infinite shape is quite clever.

What I'd like to see is proper anti-aliasing. I'm obsessive enough that it prevents me from using CSS in such cases.

Isn't this what SVG is for?

Can someone explain the triangles?

I see what their doing, but why does it make the triangle shape? Shouldn't it just render as a square with different sized rectangular borders?

Here's a modified version of it: https://skitch.com/timothee/fxnjf/the-shapes-of-css

Basically, the triangle is made of only the bottom border.

The top border is of width 0px so doesn't show. The element itself is 0x0px so doesn't show either. The right and left borders are transparent so you don't see them, but their width of 50px gives the base of the triangle. (which is then 100px) Finally the bottom border is 100px wide which gives the height of the triangle.

Note that the trapezoid further down is the same thing with a width of 100px for the element itself, as if you stretched that triangle in the middle.

It totally clicked when I saw your example, thanks!

It's because width and height are set to zero. And since the browser tapers the edge of the borders, you get a triangle shape.

Just one more thing to take away from photoshoppers. If you're a visual designer, I'd start learning to code.

It's a pity the syntax is so horrendous. After working on native mobile apps with real path support this is not appealing at all.

This is just a bit of experimentation. Not something with any significant practical benefit.

You just have to look at the code behind this - http://nicolasgallagher.com/pure-css-gui-icons/demo/ - for confirmation that this is not a viable solution for complex shape creation.

Wow, offtopic, but you have a beautiful site.

I'm in the midst of reading Robert Bringhurst's Elements of Typographic Style and it's really motivating me to design my blog in a lot neater, cleaner, typographically-aware style. I think you've really nailed that. If you haven't read that book yet, I highly recommend it; I think you'd appreciate it.

Yeah I was mainly responding to the parent which suggested that these techniques are going to be relevant for UI designers.

You're absolutely right, visual designers really do need to learn CSS.

But not for this. These examples are as relevant to real-world CSS design as writing a Reddit clone in three lines of Clojure is to real-world web development.

Quote astonished to see that this works in IE9 (apart from parallelogram).