Jon Rohan · Creating Triangles in CSS | Hacker News Reader

Jon Rohan · Creating Triangles in CSS

dinnermint.org

68 pointsgibsonf113 comments

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.)

Wow. This is insane.

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.

They're blurry at 100%

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.

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.

From 2003: http://www.designdetector.com/tips/3DBorderDemo2.html

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/

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

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.

Dude, there's a whole javascript engine:

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

ah someone already posted it :)

Used this at tumblr.com/iphone

but can he triforce?

Reply on news.ycombinator.com