4 ms·
Jon Rohan · Creating Triangles in CSS
- alexandros 16y agoAwesome. 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.
- jacobbijani 16y agoThey're blurry at 100%
- axod 16y agoit'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 16y agoIt'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.
- Morendil 16y agoAnd when you can do triangles, you can do 3D: http://www.uselesspickles.com/triangles/ http://www.uselesspickles.com/triangles/ (That page was published in something like 2006... "Nothing new under the sun" indeed.)
- gfodor 16y agoWow. This is insane.
- nailer 16y agoI 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 http://imeveryone.com/about
- EGreg 16y agoDude, there's a whole javascript engine: http://www.uselesspickles.com/triangles/ http://www.uselesspickles.com/triangles/ ah someone already posted it :)
- necolas 16y agoThis is actually fairly old, from 2009. Same thing demonstrated in 2008 - http://www.howtocreate.co.uk/tutorials/css/slopes http://www.howtocreate.co.uk/tutorials/css/slopes And more polygons by Tantek Çelik in 2001 - http://tantek.com/CSS/Examples/polygons.html 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/ http://nicolasgallagher.com/pure-css-speech-bubbles/
- jacobbijani 16y agoUsed this at tumblr.com/iphone
- rimantas 16y agoFrom 2003: http://www.designdetector.com/tips/3DBorderDemo2.html http://www.designdetector.com/tips/3DBorderDemo2.html
- antidaily 16y agobut can he triforce?
- NathanKP 16y agoI 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.