CSS透明边框

Question

我正在尝试创建一个这样的css功能区:

它可以使用以下代码正常工作.

body {
  background: url('http://i.imgur.com/FgqcKXm.jpg') no-repeat;
}
h1 {
  background: #A52927;
  display: inline-block;
  padding: 0px 30px;
  color: #EEE4D3;
  position: relative;
  height: 40px;
  line-height: 40px;
}
h1:after {
  position: absolute;
  content: "";
  top: 0px;
  left: auto;
  right: 0px;
  height: 0px;
  width: 0px;
  border-top: 20px solid transparent;
  border-right: 20px solid white;
  border-bottom: 20px solid transparent;
}

<h1>test</h1>

问题: 它在非白色背景上显示白色边框:

有没有其他方法可以在非白色背景上使用css获得相同的形状？

JS小提琴

Answer 1

只要这样:

h1:after {
    position: absolute;
    content: "";
    top: 0px;
    left: auto;
    right: -20px;
    height: 0px;
    width: 0px;
    border-top: 20px solid #A52927;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #A52927;
}

预习:

小提琴:http://jsfiddle.net/5jnzgsfp/3/