设置为CSS背景/伪元素内容的SVG polygon类填充不生效如何解决

根本原因 #

通过CSS background-image 加载的SVG是独立的外部资源，不属于当前页面的DOM树，因此页面内的CSS选择器无法匹配到SVG内部的元素，你定义的.arrow类样式自然无法作用到背景图里的三角形。只有直接内联在HTML中的SVG才会被当前页面的CSS规则控制。 #

推荐解决方案：使用mask属性实现（兼容性好、灵活度最高） #

把SVG作为遮罩层使用，箭头的颜色直接通过伪元素的背景色控制，不需要修改SVG内部代码，后续换色只需要改一行CSS即可。
以下是修正后的完整代码，同时修复了原代码中display: inlne-block的拼写错误：

.arrowbtn {
  position: relative;
  display: inline-block;
  height: 40px;
  background: red;
  padding: 10px 20px;
  transition: padding 0.4s;
  -webkit-transition: padding 0.4s;
}
.arrowbtn::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  height: 100%;
  width: 20px;
  /* 用mask加载SVG，兼容webkit内核浏览器 */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' preserveAspectRatio='none'><polygon points='0,0 100,50 0,100' /></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' preserveAspectRatio='none'><polygon points='0,0 100,50 0,100' /></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 背景色就是箭头颜色，要绿色直接改为green即可 */
  background: red;
}

.arrowbtn:hover {
  padding-right: 45px;
}
.arrowbtn.large {
  font-size: x-large;
  padding: 30px;
  line-height: 60px;
}
.arrowbtn.large:hover {
  padding-right: 60px;
}
.arrowbtn.large::after {
  width: 40px;
  right: -40px;
}
.arrowbtn.black {
  background-color: #000;
  color: #fff;
}
/* 黑色按钮的箭头直接改伪元素背景色即可 */
.arrowbtn.black::after {
  background: #000;
}

可选方案：SVG内使用currentColor #

如果不想用mask属性，也可以直接修改data URI中的SVG代码，把polygon的fill属性设为currentColor，之后通过控制伪元素的color属性就能修改箭头颜色：

/* 修改后的::after代码示例 */
.arrowbtn::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  height: 100%;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 把fill改为currentColor */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' preserveAspectRatio='none'><polygon fill='currentColor' points='0,0 100,50 0,100' /></svg>");
  /* 箭头颜色和按钮背景色同步，要绿色直接改为green即可 */
  color: red;
}
/* 黑色按钮修改color即可 */
.arrowbtn.black::after {
  color: #000;
}

内容的提问来源于stack exchange，提问作者cyberhubert