Most cross-browser safe way to build dynamic and resuable graphical element in pure CSS, CSS/SVG or CSS/HTML5 [closed]

Question

1. The Goal

I am working on a highly dynamic, extensible block/inline-block level element-style. It'll look like this:

2. What I Actually Need

Advice on choosing from amongst my options, basically. What approach is most compatible with cross-browser friendliness & extensibility as primary concerns?

I'm using SASS to render my CSS, so the <style> element in my example(s) is pseudocode. I want to be able to dynamically control the following with a well-defined class heirarchy:

• text content (idiosyncratic)
• height (highly variable)
• width (5 possible widths; I'm developing in Zurb's Foundation 5, the element will always be between 1 and 5 columns)
• background color (only 2-5 options here)
• color (only 3 options here)
• direction (L & R are probably adequate)

3. Things I've tried

Bitmap

This is no good; I'd have to make too many and can't control the angle of the point as it is stretched across heights.

Pure CSS

This is what I expect I'll have to do.

<!-- the HTML -->
<div class="arrow-label">
    <h4 class="expand"><?php echo $label-text;?></h4>
    <a href="#" class="triangle right-facing"></a>
</div>

<style>
  div.arrow-label {
    h4 {
      display:inline-block;
      background-color: $arrow-label-background-color;
    }
     .triangle { background-color: $arrow-label-background-color; }
  }

.triangle {
  width:0;
  height:0;
  display:inline-block;
  margin:0;
  border-style: solid;
  transition: border-color 300ms ease-out; 
  // I have removed transitional selectors (ie. :hover) below for brevity's sake

    &.up-facing {
      border-width: 0 rem-calc(12px) rem-calc(15px) rem-calc(12px);
      border-color: transparent transparent $triangle-color transparent;
    }
    // rinse/repeat for .left-facing, .right-facing, .bottom-facing

    &.disabled {
       transition:none;
       color: $triangle-disabled-color;
    }

    &.inherited-transition { transition: inherit}
  }
</style>

SVG

So I'll just confess that I only loosely understand how to harness what I know is the very powerful potential of SVG, here. I've generated this SVG in Illustrator, though I think that probably it needs to be modified in order to be as extensible as I'd like:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="635.436px" height="156.041px" viewBox="0 0 635.436 156.041" enable-background="new 0 0 635.436 156.041"
     xml:space="preserve">
<polygon fill="#333333" points="576.576,155.254 635.436,78.02 576.576,0.787 576.576,0 575.976,0 575.976,0 575.976,0 0,0 
    0,156.041 576.576,156.041 "/>
</svg>

But don't reeeeeally understand how to use it; I gather, for example, that I cannot achieve my ends if I use it as the background-image property argument of an element that otherwise contains the text; but neither do I get how this is done on the fly via CSS.

UPDATE

A comment requested the compiled CSS, here it is; I haven't checked the colors, I expect they are nonsensical at the moment, but otherwise I think this covers it:

/* The element itself */
div.arrow-label h4 {
  display: inline-block;
  background-color: #323232;
}


/* the code I use to make triangles, and in this case, would be capping the element with 
   note that, as per the standard, 1rem = 16px here */
.triangle {
  width: 0;
  height: 0;
  display: inline-block;
  margin: 0;
  border-style: solid;
  transition: border-color 300ms ease-out;
}

.triangle.up-facing {
  border-width: 0 0.75rem 0.9375rem 0.75rem;
  border-color: transparent transparent #ff5555 transparent;
}

.triangle.up-facing:hover {
  border-color: transparent transparent #ffa1a1 transparent;
}

.triangle.up-facing:active {
  border-color: transparent transparent #683939 transparent;
}

.triangle.down-facing {
  border-width: 0.9375rem 0.75rem 0 0.75rem;
  border-color: #ff5555 transparent transparent transparent;
}

.triangle.down-facing:hover {
  border-color: #ffa1a1 transparent transparent transparent;
}

.triangle.down-facing:active {
  border-color: #bb0000 transparent transparent transparent;
}

.triangle.right-facing {
  border-width: 0.75rem 0 0.75rem 0.9375rem;
  border-color: transparent transparent transparent #ff5555;
}

.triangle.right-facing:hover {
  border-color: transparent transparent transparent #ffa1a1;
}

.triangle.right-facing:active {
  border-color: transparent transparent transparent #683939;
}

.triangle.left-facing {
  border-width: 0.75rem 0.9375rem 0.75rem 0;
  border-color: transparent #ff5555 transparent transparent;
}

.triangle.left-facing:hover {
  border-color: transparent #ffa1a1 transparent transparent;
}

.triangle.left-facing:active {
  border-color: transparent #683939 transparent transparent;
}

.triangle.disabled {
  transition: none;
  color: #ffa1a1;
}

.triangle.inherited-transition {
  transition: inherit;
}

Answer 1

SVG file (simplified code)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100" >
    <polygon fill="#333" points="0,0 460,0 500,50 460,100 0,100" />
</svg>

CSS file, or embedded with <style>

#my_block{
    width: 190px;
    height: 40px;
    background-image: url(../images/arrow.svg);/*change to the svg url*/
    background-position: right center;
    background-size: auto 100%;
    transition: 100ms 200ms ease-out;
}
#my_block:hover{
    width: 200px;
    transition: 100ms ease-out;
    opacity: 0.7;
}

HTML (the div can be an ul, p, inline-block,..)

<div id="my_block"></div>