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

预览：

Fiddle: http://jsfiddle.net/5jnzgsfp/3/

CSS 透明边框

CSS transparent borders

html

css

css-shapes