Its a well known technique (using border slants), though I enjoyed to implement it by myself as a simple drawing class that works in major browsers. What I want to know, is where it can be used (or maybe it is useless?), and what should I add or change.
I doubt the possibility of emulating canvas tag in ie using this technique, because its very limited compared to canvas (for example, its not possible to draw lines).
This technique can bring cross-browser support of drawing polygons.
Also please check this link: http://www.uselesspickles.com/triangles/demo.html (I found it after I implemented my algorithm)
I use the same method to draw triangles, but a bit more simplified (requires 1 div less per triangle)
ah true. Still, having 61 DIVs in the canvas in that example is a fair number.
Still cool though.
How about using ● for a circle and scaling the font. I expect you'd have to do some calculations on each platform to adjust for font differences etc, but could work.
I should know what font to use, that is available in all operating systems. And how to properly scale and position the character.(should check how the size and position of the character depends on the size of the font)
Manually tried to align them: http://old.etoleto.com/c1/ (orange circles are of text, transparent blue ones of divs)
I'm not sure if i should use this instead of divs - being able to select them as text annoys
15 comments
[ 4.0 ms ] story [ 49.9 ms ] threadThis technique can bring cross-browser support of drawing polygons.
So IE not supporting canvas tag 'officially' isn't really a problem.
EDIT: Just found that ExplorerCanvas has a new home at soundforg. Download here http://sourceforge.net/project/showfiles.php?group_id=163391
This is cool, I didn't know. I googled around and found some more:
http://meyerweb.com/eric/css/edge/slantastic/demo.html
http://infimum.dk/HTML/slantinfo.html (check also links from there)
http://infimum.dk/HTML/rasterTriangleDOM.html
Still cool though. How about using ● for a circle and scaling the font. I expect you'd have to do some calculations on each platform to adjust for font differences etc, but could work.
http://nedbatchelder.com/blog/200805/css_homer_animated.html
(Not that I'd recommend it.)
Manually tried to align them: http://old.etoleto.com/c1/ (orange circles are of text, transparent blue ones of divs) I'm not sure if i should use this instead of divs - being able to select them as text annoys