The Shapes of CSS

[pilif]

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?

[yuhong]

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

[andyford]

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

[chriscoyier]

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.

[eneveu]

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

[ck2]

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.

[DanielRibeiro]

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.

[genieyclo]

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?

[tintin]

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

[rimantas]

HN markup is pretty inefficient anyway.

[program]

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.

[bruceboughton]

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

[Stuk]

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

[kaitnieks]

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

[Timothee]

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.

[thatjoshguy]

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

[wslh]

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

[doctoboggan]

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

[olavk]

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.

[tambourine_man]

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.

[Raticide]

Isn't this what SVG is for?

[lean]

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?

[Timothee]

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.

[mnutt]

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.

[jsavimbi]

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

[cageface]

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.

[mortenjorck]

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.

[pointyhat]

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