4 ms·
No, making a shape in CSS is silly. CSS is for styling not drawing. If you want to make a triangle, without an additional (unnecessary) HTTP request, you shoul
by tinco 13y ago
No, making a shape in CSS is silly. CSS is for styling not drawing.
If you want to make a triangle, without an additional (unnecessary) HTTP request, you should use the appropriate web tech which is SVG.
Just like all other resources you can easily embed an SVG in your HTML if you're being stingy on the requests (which is a good thing).
- viggity 13y agonot all browsers support SVG (namely IE8). for folks who have to support LOB, this is still an issue.
- lambda 13y agoSure, you can treat this as a hack to support older browsers. But with modern browsers, or once those older browsers fall to low enough market share, just embed SVG.
- ryanbrunner 13y agoOn the other hand, callout arrows seem like a perfectly good case of something that doesn't necessarily need to be present for the site to function. If your compatibility goals are pixel-perfect compatibility with IE8, this is an issue (and my thoughts and prayers are with you), but if your site simply needs to be functional, callout triangles wouldn't be on my top 10 things to worry about.
- psychometry 13y agoBack in the real world, however, we can't use the ideal solution every time because of browser support. Thus, the easiest, most flexible option is CSS.
- lambda 13y agoIt's not really the most flexible option. It allows you to make only a fairly limited type of triangle, only pointing in one of eight directions. If you want compatibility with older versions of IE, use both SVG and VML, depending on the browser (VML for IE 8 and earlier, SVG for everything else). This gives you a lot more flexibility (you can draw any polygon, arc, or bezier curve that you want), and compatibility all the way back to IE 5.
- jack-r-abbit 13y agoI'm racking my brain trying to see the 8 directions. I only see 4: up, down, left & right. Care to explain the other 4?
- lambda 13y agoGot it from here: http://apps.eky.hk/css-triangle-generator/ http://apps.eky.hk/css-triangle-generator/ Here's a series of examples showing how it works (not a fun animation like the OP, but a little easier to follow): http://jsfiddle.net/X8gXS/ http://jsfiddle.net/X8gXS/ Basically, you can get any triangle as long as at least one of the sides is horizontal or vertical.
- jack-r-abbit 13y agoAh... I see it now. Thanks.