CSS透明边框[重复]答案

【问题标题】：CSS transparent borders [duplicate]CSS透明边框[重复]
【发布时间】：2015-12-01 19:32:24
【问题描述】：

我正在尝试创建这样的 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;
}

&lt;h1&gt;test&lt;/h1&gt;

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

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

JS Fiddle

【问题讨论】：

为什么是-1？这个问题有什么问题？
我能看到反对票的唯一原因是因为您没有在问题本身中包含 HTML，但由于问题很清楚，它绝对不值得反对。
另一种可以将skew(x) 用于伪元素fiddle
我玩过它：jsfiddle.net/5jnzgsfp/5

标签： html css css-shapes

【解决方案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/

【讨论】：