大多数跨浏览器安全的方式来在纯CSS,CSS/SVG或CSS/HTML5中构建动态和可恢复的图形元素

Question

1.目标

我正在开发一个高度动态,可扩展的块/内联块级元素样式.它看起来像这样:

2.我真正需要的东西

基本上就我的选择中的选择提供建议.作为主要关注点,哪种方法与跨浏览器友好性和可扩展性最兼容？

我正在使用SASS来渲染我的CSS,因此<style>我的示例中的元素是伪代码.我希望能够使用明确定义的类heirarchy动态控制以下内容:

• 文字内容(特殊)
• 身高(变化很大)
• 宽度(5种可能的宽度;我在Zurb的Foundation 5中开发,元素总是在1到5列之间)
• 背景颜色(这里只有2-5个选项)
• 颜色(这里只有3个选项)
• 方向(L&R可能足够)

我尝试过的事情

位图

这不好; 我必须做太多而无法控制点的角度,因为它在高处伸展.

纯CSS

这是我期望我必须做的.

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

所以我只是承认我只是松散地理解如何利用我所知道的SVG非常强大的潜力.我在Illustrator中生成了这个SVG,虽然我认为可能需要修改它才能像我想的那样可扩展:

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

但是,不要理解如何使用它; 例如,我收集的是,如果我将它用作background-image包含文本的元素的属性参数,则无法实现我的目的; 但我也不知道如何通过CSS实现这一点.

UPDATE

评论请求编译的CSS,这里是; 我没有检查颜色,我希望它们目前是荒谬的,但我认为这涵盖了它:

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