CSS “倒置”边界半径可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22421880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
'Inverted' border-radius possible?
提问by Kragalon
I was working on the CSS of my website when I had the idea of making tabs (or tab) for my links. I have the text removed in this example, but this is going to be a navigation bar basically. Here's the picture:
当我想到为我的链接制作标签（或标签）时，我正在处理我网站的 CSS。我在这个例子中删除了文本，但这基本上是一个导航栏。这是图片：
My question is, how would I get a 'border-radius'-ish effect where the BLACK arrow is pointing and look like the effect where the BLUE arrow is pointing? Is there a certain webkit command to help me, or should I make it an img or perhaps jquery?
我的问题是，如何在黑色箭头指向的地方获得“边界半径”效果，并且看起来像蓝色箭头所指的效果？是否有特定的 webkit 命令可以帮助我，还是应该将其设为 img 或 jquery？
Thanks a ton!(I draw some beautiful arrows, right?)
非常感谢！（我画了一些漂亮的箭头，对吧？）
回答by Ian Clark
Not using the native border-radius. As mentioned on MDN "Negative values are invalid". You could definitely look for a library out there which does this for you automatically (though I find the approach taken in Philip's suggested library to be particularly outdated).
不使用本机border-radius. 正如 MDN 上提到的“负值无效”。您绝对可以在那里寻找一个自动为您执行此操作的库（尽管我发现 Philip 建议的库中采用的方法特别过时）。
Using pure CSS I have come up with an approach. The idea is to add 4 extra elements inside your container, set their background to the same color as your page background (so this will not let page content underneath filter through – for that, you'd need SVG masking or similar), and to positionthem in such a way that they lie just outside of the element itself. We then apply a border-radiuswhich gives the affect:
使用纯 CSS 我想出了一种方法。这个想法是在你的容器中添加 4 个额外的元素，将它们的背景设置为与页面背景相同的颜色（这样不会让下面的页面内容过滤——为此，你需要 SVG 遮罩或类似的），然后position它们以这样的方式位于元素本身之外。然后我们应用 aborder-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>回答by G-Cyrillus
if your element has only a background color, you may use pseudo-elements and box-shadow.
如果您的元素只有背景颜色，您可以使用伪元素和框阴影。
a hudge box-shadow on pseudo elements can fill the element. examples : http://codepen.io/gcyrillus/pen/hlAxo, http://codepen.io/gc-nomade/pen/dtnIv, http://codepen.io/gcyrillus/pen/yJfjl.
伪元素上的 hudge box-shadow 可以填充元素。例子：http://codepen.io/gcyrillus/pen/hlAxo，http://codepen.io/gc-nomade/pen/dtnIv，http://codepen.io/gcyrillus/pen/yJfjl。
adding a linear gradient, you may draw a box similar to what you look for that can grow any heights : http://codepen.io/anon/pen/cIxwD.
添加线性渐变，您可以绘制一个类似于您所寻找的可以增长任何高度的框：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;
}
回答by Philip G
You can use this plugin. http://jquery.malsup.com/corner/(uses jquery)
你可以使用这个插件。http://jquery.malsup.com/corner/（使用 jquery）
And then do the following:
然后执行以下操作：
$(this).corner("bite");
Requires jQuery and jQuery Corner!
需要 jQuery 和 jQuery 角！
