3 ms·

Actually I'd use SVG for that, it's even trivial to write: <svg width='20' height='10'> <path fill='#D94948' d='M0,20h20L10,0'/> </svg> Should b

by ygra 13y ago

Actually I'd use SVG for that, it's even trivial to write: <svg width='20' height='10'> <path fill='#D94948' d='M0,20h20L10,0'/> </svg> Should be supported pretty much everywhere canvas is, but without the need of scripting to actually get a triangle.

Sharlin 13y ago
But that's hardly reusable. You'll have to copypaste the (completely nonobvious) markup everywhere you want a triangle. Although it might be possible to use the CSS :before pseudo-element...
- mbq 13y ago
  SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement http://www.w3.org/TR/SVG/struct.html#SymbolElement
  - matthuggins 13y ago
    I can't stand the w3 docs sometimes. After reading that section about `symbol`, I still have no clue what it is or how to use it.
    - ygra 13y ago
      What exactly don't you understand? I find the W3C specs fairly well-written, actually. You declare a symbol in the defs section of an SVG image and you can instantiate it with use. E.g. <svg> <defs> <symbol id='foo'> <circle r='5' cx='10' cy='3'/> </symbol> </defs> <use xlink:href='#foo' x='2' y='5'/> <use xlink:href='#foo' x='10' y='10' fill='red' stroke='blue'/> </svg> (does not actually work, because namespaces are missing and the symbol likely is missing things like a viewbox, but just to get the general idea across)
- lambda 13y ago
  More obvious if you use a polygon rather than a path object: <svg height=10 width=20> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> And you can put it in your CSS using a data URI: .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; }
  - ygra 13y ago
    I'm more comfortable with the path syntax, and polygons are pretty much the same as a path, except that you would prepend M and append z to the list of points (for certain buggy renderers it might be necessary to put an L inside, too). Paths have handy shorthands for horizontal, vertical and relative movement, though.
    - lambda 13y ago
      If you're more comfortable with it, that's great. To someone who's not already comfortable with it, points="0,10 20,10 10,0" is a lot more obvious than d='M0,20h20L10,0'
- ygra 13y ago
  If you're still within HTML, is <img src='triangle.svg'> really that much harder than <div class='triangle'></div>?

by ygra 13y ago

Sharlin 13y ago

But that's hardly reusable. You'll have to copypaste the (completely nonobvious) markup everywhere you want a triangle. Although it might be possible to use the CSS :before pseudo-element...

mbq 13y ago
SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement http://www.w3.org/TR/SVG/struct.html#SymbolElement
- matthuggins 13y ago
  I can't stand the w3 docs sometimes. After reading that section about `symbol`, I still have no clue what it is or how to use it.
  - ygra 13y ago
    What exactly don't you understand? I find the W3C specs fairly well-written, actually. You declare a symbol in the defs section of an SVG image and you can instantiate it with use. E.g. <svg> <defs> <symbol id='foo'> <circle r='5' cx='10' cy='3'/> </symbol> </defs> <use xlink:href='#foo' x='2' y='5'/> <use xlink:href='#foo' x='10' y='10' fill='red' stroke='blue'/> </svg> (does not actually work, because namespaces are missing and the symbol likely is missing things like a viewbox, but just to get the general idea across)
lambda 13y ago
More obvious if you use a polygon rather than a path object: <svg height=10 width=20> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> And you can put it in your CSS using a data URI: .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; }
- ygra 13y ago
  I'm more comfortable with the path syntax, and polygons are pretty much the same as a path, except that you would prepend M and append z to the list of points (for certain buggy renderers it might be necessary to put an L inside, too). Paths have handy shorthands for horizontal, vertical and relative movement, though.
  - lambda 13y ago
    If you're more comfortable with it, that's great. To someone who's not already comfortable with it, points="0,10 20,10 10,0" is a lot more obvious than d='M0,20h20L10,0'
ygra 13y ago
If you're still within HTML, is <img src='triangle.svg'> really that much harder than <div class='triangle'></div>?