The Shapes of CSS
css-tricks.com
css-tricks.com
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
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?
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.
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
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 :-).
"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.
What I'd like to see is proper anti-aliasing. I'm obsessive enough that it prevents me from using CSS in such cases.
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?
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.
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.
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.
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.