使用SVG作为CSS背景图像

Question

我将反射角度与SVG作为背景。这是jsfiddle上的example。

.button {
  background: #000;
  float: left;
  position: relative;
  color: #999;
  font: 18px/130% Arial, sans-serif;
  padding: 10px;
  clear: both;
  margin: 10px;
}

.button:hover {
  color: #fff;
}

.button:after {
  content: '';
  display: block;
  width: 10px;
  position: absolute;
  right: -10px;
  height: 100%;
  top: 0;
  background: transparent url('data:image/svg+xml; charset=utf-8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 20" preserveAspectRatio="none"><path d="m0,0 l10,10 l-10,10 l-0,-20z" stroke-width="1.5" fill="#000"/></svg>') 0 0 no-repeat;
}

此代码适用于完美的宽度Chrome，并且不适用于EDGE，IE，FF。如何解决这个问题？