是否可以实现“倒置”的边框半径？

Question

我在制作网站的CSS时，想到为我的链接制作选项卡。此示例已将文本删除，但基本上这将是一个导航栏。这里是图片： 我的问题是，我该如何在黑色箭头指向的位置产生类似于border-radius的效果，并且看起来像蓝色箭头指向的效果？是否有某个webkit命令可以帮助我，或者应该将其设置为img或可能是jquery？

非常感谢！（我画了一些漂亮的箭头，对吗？）

- Kragalon

---

请使用此链接 http://jsfiddle.net/Zpx5j/，你可以随意使用。 - fearis

我在看到这个之前就已经想到了同样的方法。我猜伟大的思想总是会相通。 - Kragalon

Answer 1

没有使用本地的border-radius。如MDN上所述“负值是无效的”。你肯定可以寻找一个自动为您完成此操作的库（尽管我发现菲利普建议的库采用的方法特别过时）。

使用纯CSS，我想出了一种方法。这个想法是在容器内部添加4个额外的元素，将它们的背景设置为与页面背景相同的颜色（因此，这不会让页面内容在下面过滤-对于这个，您需要SVG遮罩或类似），并以这样的方式position它们，使得它们恰好位于元素外部。然后我们应用一个border-radius，它产生的效果是：

#main {
    margin: 40px;
    height: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }

<div id="main">
    <div class="top left"></div>
    <div class="top right"></div>
    <div class="bottom left"></div>
    <div class="bottom right"></div>
</div>

- Ian Clark

---

谢谢大家的帮助。最终我在选项卡两侧各创建了2个<div><div></div></div>，然后给父级div添加了与标题背景相匹配的边框，并给子div添加了橙色背景。接着分别在右下和左下边框上给父级添加了border-radius。现在看起来很棒，但我发现这个答案有些相关。所以还是要感谢大家。 - Kragalon

@IanClark 确认。这个角落是虚假的。由于背景色是纯色的，所以它后面的任何内容都会被隐藏起来。它不是一个剪贴区。 - Streching my competence

最佳解决方案是将网站/应用程序的设计大小固定在那个点，并制作一个可以真正具有切割效果的.SVG。也许使用正确的尺寸测量，它也可以与动态大小很好地配合使用。 - Streching my competence

我一直在寻找一个非SVG的真正切角解决方案，这个想法一直在我脑海中挥之不去，突然有一天我意外地做到了...在这里分享给其他遇到同样问题的人 - 链接 - kw7

Answer 2

如果你的元素只有背景颜色，你可以使用伪元素和盒子阴影。在伪元素上设置一个巨大的盒子阴影可以填充整个元素。例如：http://codepen.io/gcyrillus/pen/hlAxo, http://codepen.io/gc-nomade/pen/dtnIv, http://codepen.io/gcyrillus/pen/yJfjl。通过添加线性渐变，你可以绘制一个类似于所需的方框，可以任意增加高度：http://codepen.io/anon/pen/cIxwD。

 div {
   width:800px;
   margin:auto;
   position:relative;
   overflow:hidden;
   min-height:2000px;
    background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 100px,
    orange 100px,
    orange
    );
 }
div:before,
div:after
{
  content:'';
  position:absolute;
  top:0;
  height:30px;
  width:60px;
  box-shadow: 0 0 0 500px orange;
  border-radius:0 0 0.5em 0;

}
div:after {
  right:0;
  border-radius: 0 0 0 0.5em;
}

- G-Cyrillus

Answer 3

你可以使用这个插件： http://jquery.malsup.com/corner/ （使用jquery）。然后按照以下步骤操作：

 $(this).corner("bite");

需要使用jQuery和jQuery Corner插件！

- Philip G

---

那看起来像是一种非常老派的做法。 - Ian Clark

是的。但我自己还没有测试过。 - Philip G