
Jon Rohan · Creating Triangles in CSS - gibsonf1
http://www.dinnermint.org/blog/css/creating-triangles-in-css/
======
Morendil
And when you can do triangles, you can do 3D:

<http://www.uselesspickles.com/triangles/>

(That page was published in something like 2006... "Nothing new under the sun"
indeed.)

~~~
gfodor
Wow. This is insane.

------
alexandros
Awesome. I wonder if PG can use this to replace the upvote/downvote arrows
that crack so badly under zoom and add unnecessary HTTP requests to boot.

~~~
axod
it'd be simple enough just to use data: urls for those.

uparrow =

    
    
      data:image/gif;base64,R0lGODlhCgAKALMJANPT06
      enp%2Fb29r%2B%2Fv52dnfn5%2Bbq6usLCwpqamv%2F%
      2F%2FwAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAA
      AAAKAAoAAAQcMMlJq712GIzQDV1QFV0nUETZTYDaAdIhz3ISAQA7
    

It is fairly stupid that HN doesn't use an expires header to cache the
upmod/downmod arrows, so _everyone_ requests them _every_ time the visit.

~~~
bobds
It's quite often that the arrow images and css styles timeout for me. I think
we would all appreciate some more caching, especially the server.

------
rimantas
From 2003: <http://www.designdetector.com/tips/3DBorderDemo2.html>

------
necolas
This is actually fairly old, from 2009.

Same thing demonstrated in 2008 -
<http://www.howtocreate.co.uk/tutorials/css/slopes>

And more polygons by Tantek Çelik in 2001 -
<http://tantek.com/CSS/Examples/polygons.html>

The speech bubble effect in the demo can also be done without presentational
markup by using pseudo-elements - <http://nicolasgallagher.com/pure-css-
speech-bubbles/>

------
nailer
I used this to create a new way to make vintage-style ribbons, without using
any images.

Check out the 'Twitter' and 'Email' ribbons on <http://imeveryone.com/about>

------
NathanKP
I have used this trick in just about every web app I have programmed. I first
noticed it while looking through the source code for the Vimeo website.

------
EGreg
Dude, there's a whole javascript engine:

<http://www.uselesspickles.com/triangles/>

ah someone already posted it :)

------
jacobbijani
Used this at tumblr.com/iphone

------
antidaily
but can he triforce?

