Hacker News Reader

Comment by jabo | Hacker News Reader

The reason this is clever is because CSS wasn't intended to be used to draw shapes. You would use HTML5's canvas element to do that. Instead this shows how you can hack a simple border property to make a DOM element look like a triangle.

View on HN

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.

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...

SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement

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.

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)

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;
  }

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.

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'

If you're still within HTML, is

  <img src='triangle.svg'>

really that much harder than

  <div class='triangle'></div>?

Reply on news.ycombinator.com