Css 反转边框 2.0

Question

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

但这始终是一种技巧。这是我的问题：

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

在这种情况下我无法完成这个技巧。

是否可以 "cut out" 选项卡的额外部分？以更普遍适用的方式达到同样的效果？

Answer 1

我会考虑 linear/radial-gradient 创建没有所有这些的整个元素 pseudo-element:

.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>

更新

这里是没有使用 shorthand 版本的相同代码：

.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>

Css 反转边框 2.0

Css inverted Borders 2.0

css

transparency

border