'倒置'边界半径可能？ [英] 'Inverted' border-radius possible?

问题描述

当我想要为我的链接制作标签（或标签）时，我正在使用我的网站的CSS。我在这个例子中删除了文本，但这将是一个导航栏基本上。图片如下：

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:

我的问题是，如何得到一个border-radius-ish效果，其中BLACK箭头指向并且看起来像BLUE箭头指向的效果？有没有一个webkit命令来帮助我，或者应该让它成为一个img或者jquery？

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?

感谢一吨（我画了一些美丽的箭头，对吧？

Thanks a ton!(I draw some beautiful arrows, right?)

推荐答案

不使用原生 border-radius 。如MDN 负值无效中所述。你肯定可以找到一个图书馆，这是为你自动做（虽然我发现在菲利普的建议库中采取的方法是特别过时的）。

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

使用纯CSS我提出了一种方法。这个想法是在容器中添加4个额外的元素，并且以 position 的方式添加它们，使得它们位于元素本身之外。然后我们应用一个 border-radius ，它会产生以下影响：

Using pure CSS I have come up with an approach. The idea is to add 4 extra elements inside your container, and to position them in such a way that they lie just outside of the element itself. We then apply a border-radius which gives the affect:

CSS p>

CSS

#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; }

HTML

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

这篇关于'倒置'边界半径可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！