CSS透明边框

Question

我试图像这样创建一个css功能区：

使用以下代码可以正常工作。

＆＃13;

＆＃13;

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

＆＃13;

<h1>test</h1>

＆＃13;

＆＃13;

＆＃13;

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

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

JS Fiddle

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/