Is the “inverted” border possible?

Question

I was working on the CSS of my site when I had the idea of ​​making tabs (or tabs) for my links. In this example, the text is deleted, but basically it will be a navigation bar. Here is the image:

My question is: how do I get the effect of "border-radius" -ish, where the BLACK arrow points and looks like the effect that the BLUE arrow points to? Is there some kind of webkit command to help me, or should I make it img or maybe jquery?

Thank you, ton! (I draw beautiful arrows, right?)

Answer 1

Do not use native border-radius . As mentioned in MDN , Negative Values ​​are Invalid . You can definitely look for a library that does this automatically for you (although I believe that the approach suggested by Philip suggested the library be especially outdated).

Using pure CSS, I came up with an approach . The idea is to add 4 extra elements inside your container and position them so that they lie directly outside the element itself. Then we apply border-radius , which gives the effect:

 #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 background color, you can use pseudo-elements and window shadow.

a shadow shadow on pseudo-elements can fill an 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 can draw a field similar to what you are looking for, which can grow any height: 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!