'Inverted' border-radius possible?

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>

Answer 2

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 .

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 .

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

Answer 3

You can use this plugin. http://jquery.malsup.com/corner/ (uses jquery)

And then do the following:

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

Requires jQuery and jQuery Corner!