如何使border-radius创建的内部空白区域透明？

Question

如果您签出my fiddle，您可能会注意到border-radius属性创建的空白区域。

我试图通过以下方式摆脱它：

background: transparent

但它改为蓝色。

我该如何解决这个问题？我需要让它在Firefox中运行。

jsFiddle

Answer 1

删除伪元素的背景并添加相同颜色的粗边框，然后增加边框半径以使内部曲线可见：

.tail:after {
  position: absolute;
  content: '';
  top: -10px;
  width: 10px;
  height: 10px;
  border: solid #4196C2;
}

/* ... */

.tail--left:after {
  left: 0;
  border-width: 10px 10px 0 0;
  border-top-right-radius: 20px;
}

/* ... */

.tail--right:after { 
  right: 0;
  border-width: 10px 0 0 10px;
  border-top-left-radius: 20px;
}

请参阅JSfiddle example。

您甚至可以在没有额外跨度的情况下执行此操作：http://jsfiddle.net/57nj4t6d/5/