
The Shapes of CSS - matt1
http://css-tricks.com/examples/ShapesOfCSS/
======
chrisacky
I love the Space Invader style from this article. I'm making a 20 second
animation for the game now... give it an hour and then post what I have.

Here is the current.. (ONLY WORKS ON WEBKIT) - Will add animation for other
vendors once I have finished.

\----

Space Invader Animation CSS3 Only

<http://jsfiddle.net/dd454/20/show>

------
jarek-foksa
CSS was never meant to be used for drawing complex shapes. If you are using
those hacks instead of proper SVG or canvas paths then you are doing it
_wrong_.

~~~
rytis
Totally with you on this. Really sad to see that a "triangle" is actually a
"border"! Seriously, WTF?! Or is it just me, and everyone else is ok with
that?

~~~
vibrunazo
It's just a funny thing to giggle at. But I really hope no one will use this
in production.

~~~
alecperkins
I'm currently working on a site that uses it heavily in production for visual
enhancements and details. It's a great trick that works well, and doesn't
require any additional markup if you use :before and :after pseudo-elements.
Using CSS instead of images means it's easy to programmatically manipulate it,
as well. eg A color picker system with a notch that varies with the color
being picked. The new Google+ design uses the triangle trick with a twist,
making an open triangle that shows what's underneath it, like your cover
photo.

------
yuvadam
I wonder if the last space invader example can be extrapolated to generate any
arbitrary pixel art.

~~~
lbotos
I think it could be for one color pieces, but anything beyond that and it
makes a lot more sense to use an svg or div based solution.

~~~
zevyoura
It makes more sense to use an svg based solution for almost all of these
examples also.

------
samsonasu
Cool demo, made even cooler because they stuck "contenteditable" on the style
tags so you can play around with the shapes to see how they work right in the
browser.

~~~
secoif
Right Click -> Inspect Element

~~~
samsonasu
I haven't seen a way to edit CSS on the before and after pseudo elements in
the web inspector. If I'm missing something I'd love to know about it.

~~~
madeofchalk
Its there, plain as day. <http://cl.ly/GwZz>

------
kjhughes
Interesting collection, but as the intro states: _Any kind of CSS goes, as
long as it's supported in at least one browser._

More impressive and useful would have been a reasonable floor above which the
tricks were guaranteed across browsers. ...or at least a compatibility note
next to each technique. For example, IE 8 can't handle rounded corners, so
infinity, egg, packman, talk bubble, etc do not work at all. Version 8 is as
high as Windows XP users can go with IE, so there's a lot of IE 8 out there
still.

~~~
gpmcadam
Most everyday problems related to rounded edges in CSS can be solved with CSS3
PIE (<http://css3pie.com/>).

How well these shapes would render though, I don't know.

------
factorialboy
Nice!

A month ago I remember struggling to create those triangle pointy arrows for
tool tips.

I was an idiot for not using Twitter Bootstrap in that project.. :-/

------
isnotchicago
Has anyone else noticed that at certain zoom levels, the triangle in the talk
bubble looks disconnected by one pixel from the box? I have seen this problem
with any similar use of the triangle hack.

~~~
alecperkins
Yes, I've seen that often. It's most apparent even without any zooming on
mobile Safari. For this reason, whenever I use the triangle effect, I'll
offset the element/pseudo-element by one pixel to avoid the gap.

~~~
isnotchicago
Any ideas on a fix that works when the triangle must perfectly align with a
box? In other words, when the base of the triangle should be the same width as
the side of the box it touches. In this case, moving the triangle one pixel
closer to the box means it does not fit perfectly against the box.

Example: <http://jsfiddle.net/PLMSA/>

~~~
alecperkins
Since it's basically a rounding error, I'm not sure if there's any way to
avoid the gap without some overlap. In that example, a :before pseudo-element
that's the same width as the box and one pixel above the triangle can provide
the overlap without needing to offset the triangle itself.

<http://jsfiddle.net/enTz9/>

------
delan
Very useful, though it has been posted numerous times before.

<http://hackerne.ws/item?id=2876612>

~~~
tfb
It's certainly very cool, but is it really that useful? Or I could just be
missing the bigger picture. I actually hope that's the case so I can learn
something new today. But it just seems to me like making a png/gif image is
much easier and more practical. I do love to see technology pushed to its
limits though!

I guess one of the cooler applications of this shape making method would be
the ability to transform one shape into another very smoothly with a
relatively small filesize (as opposed to an animated gif).

~~~
dmvaldman
There are more benefits:

Costs nothing to change colors. This makes it great for iterating.

No bandwidth costs as CSS is rendered on the client.

Infinitely scalable in size. No rasterization.

Availability of other CSS functionality, like shadows, animation etc

~~~
majormajor
The last one is an issue, actually. The space invader one is the extreme case:
it's already a shadow. And the border tricks for triangles are also shadow-
resistant.

------
coopdog
I lost it at ying yang

