Css倒置边界2.0

Question

人们想出了倒置的边界（这是一个例子）：https://css-tricks.com/examples/RoundOutTabs/

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

我将在具有动态透明度的背景上覆盖倒角的方框，并在下方放置图片。

在这种情况下，我无法解决这个问题。

是不是可以“切掉”标签的额外部分？以更普遍适用的方式实现同​​样的效果？

Answer 1

我会考虑线性/径向渐变来创建没有所有这些伪元素的整个元素：

.active {
  padding:20px 0;
  width:100px;
  text-align:center;
  display:inline-block;
  background:
  radial-gradient(circle at bottom right,orange 50%,transparent 53%) 4px 0/16px 10px no-repeat,
  radial-gradient(circle at bottom left,orange 50%,transparent 53%) calc(100% - 4px) 0%/16px 10px no-repeat,
  radial-gradient(circle at top left,transparent 50%,orange 55%) 0% 100%/16px 10px no-repeat,
  radial-gradient(circle at top right,transparent 50%,orange 55%) 100% 100%/16px 10px no-repeat,
  linear-gradient(orange,orange) 20px 0px/calc(100% - 40px) 20px no-repeat,
  linear-gradient(orange,orange) 10px 10px/calc(100% - 20px) 100% no-repeat;
}

<span class="active">
 link
</span>

UPDATE

以下是不使用速记版本的相同代码：

.active {
  padding:20px 0;
  width:100px;
  text-align:center;
  display:inline-block;
  background-image:
  radial-gradient(circle at bottom right,orange 50%,transparent 53%),
  radial-gradient(circle at bottom left,orange 50%,transparent 53%),
  radial-gradient(circle at top left,transparent 50%,orange 55%),
  radial-gradient(circle at top right,transparent 50%,orange 55%),
  linear-gradient(orange,orange),
  linear-gradient(orange,orange);
  background-position:4px 0,calc(100% - 4px) 0%,0% 100%,100% 100%,20px 0,10px 10px;
  background-size:16px 10px,16px 10px,16px 10px,16px 10px,calc(100% - 40px) 20px,calc(100% - 20px) 100%;
  background-repeat:no-repeat;
}

<span class="active">
 link
</span>