Css反向边框2.0

人们提出了反向边界（这里是一个例子）：

但它总是一个黑客。这是我的问题：

我将在一个背景上用倒转的角覆盖这个盒子，这个背景是动态透明的，下面有图片

在这种情况下我无法成功

---

难道不可能“剪掉”选项卡的额外部分吗？为了达到同样的效果，但在更普遍适用的方式中，

< P>我会考虑线性/径向梯度来创建整个元素，而没有所有这些伪元素：

.active{
填充：20px0；
宽度：100px；
文本对齐：居中；
显示：内联块；
背景：
径向梯度（右下角圆圈，橙色50%，透明53%）4px 0/16px 10px无重复，
径向梯度（左下角圆圈，橙色50%，透明53%）计算（100%-4px）0%/16px 10px无重复，
径向梯度（左上角的圆圈，透明50%，橙色55%）0%100%/16px 10px无重复，
径向梯度（右上角的圆圈，透明50%，橙色55%）100%100%/16px 10px无重复，
线性梯度（橙色，橙色）20px 0px/计算（100%-40px）20px无重复，
线性梯度（橙色，橙色）10px 10px/钙（100%-20px）100%无重复；
}

链接

这里的语法似乎有问题。它不会在角度下编译5@tatsu它没有坏；）但是有了angular，你不能毫无疑问地使用速记。。。我以前遇到过这种情况，你需要分割属性，我要编辑我的answer@tatsu我更新了，你可以试试第二版的code@tatsu不，一切都很方便：）我唯一的工具就是我的大脑；）@塔苏

那是胡说八道

-->这是我的经验，我不用笔和纸。。。顺便说一句，如果你想了解这并不难。。把它们一个接一个地拿出来，改变颜色来识别它们，玩弄价值观，然后你就会明白发生了什么。。魔法是当它们都是同一颜色时，创造出完美形状的幻觉，但一旦你把它们变成不同的颜色，魔法就会消失；）然后你会看到发生了什么