Hacker News new | comments | ask | show | jobs | submit login
Jon Rohan · Creating Triangles in CSS (dinnermint.org)
68 points by gibsonf1 on Dec 18, 2010 | hide | past | web | favorite | 13 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.


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.


They're blurry at 100%



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?




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: