'Inverted' border-radius possible? [duplicate]

Question

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:

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

Answer 1

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

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

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