6 ms·

No, having to open an image editor to create a simple shape you can make in CSS is silly. So is an additional, unnecessary HTTP request.

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 ago
  not all browsers support SVG (namely IE8). for folks who have to support LOB, this is still an issue.
  - lambda 13y ago
    Sure, 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 ago
    On 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 ago
  Back 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 ago
    It'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 ago
      I'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 ago
        Got 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 ago
        Ah... I see it now. Thanks.
lambda 13y ago
You can write SVG by hand and embed it in HTML. This requires no use of an external editor nor any extra HTTP request. <svg height=10 width=20> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> If you want to include it in your CSS, you can include it via a data URI, though you need to embed it as an actual XML document (within an HTML document, you can skip the namespace and use HTML syntax which doesn't require quotes around attributes) and can't include line breaks so the syntax is a little bit more cumbersome: .triangle { background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center; width: 20px; height: 10px; } Examples of both in action: http://jsfiddle.net/jtR4G/ http://jsfiddle.net/jtR4G/

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 ago
not all browsers support SVG (namely IE8). for folks who have to support LOB, this is still an issue.
- lambda 13y ago
  Sure, 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 ago
  On 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 ago
Back 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 ago
  It'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 ago
    I'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 ago
      Got 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 ago
        Ah... I see it now. Thanks.

lambda 13y ago

You can write SVG by hand and embed it in HTML. This requires no use of an external editor nor any extra HTTP request. <svg height=10 width=20> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> If you want to include it in your CSS, you can include it via a data URI, though you need to embed it as an actual XML document (within an HTML document, you can skip the namespace and use HTML syntax which doesn't require quotes around attributes) and can't include line breaks so the syntax is a little bit more cumbersome: .triangle { background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center; width: 20px; height: 10px; } Examples of both in action: http://jsfiddle.net/jtR4G/ http://jsfiddle.net/jtR4G/