How to create a border gap illusion


Tags: html,css,css3,svg,border

Problem :

This is the illusion that I am attempting to create:

enter image description here

Notice that my designer wants the border cut off in the middle of the div, this is what I need to know how to do. I don't think overlapping with a z-index will work because of how the HTML is laid out.

This is the HTML code of which the structure may not be changed for maximum device compatibility, however, if adding an element is the solution, I believe that may be done:

<div id="nav_icons_con" class="mopn">
  <div id="inner_nav_container" class="show_inner_nav">
    <div class="nav_link_container">Home</div>
  </div>
</div>

Here is the basic current CSS code:

#nav_icons_con {
    z-index: 1;
    cursor:pointer;
    height: 5.005em;
    width: 5.005em;background-image:url(background.png);
    background-size:70%;
    background-repeat:no-repeat;
    background-position:center;
    margin:.385em .385em 0 0;
}
#nav_icons_con.mopn{
    background-color:#FFF;
    border:2px solid #83C5E6;
    border-bottom:none;
    box-shadow:5px 5px 10px #666;
}
#inner_nav_container, .inner_nav_container{
    cursor:pointer;
    display:none;
    position:absolute;
    top:5.39em;
    right:.385em;
    width:12.5em;
    white-space:normal;
    background-color:#FFF;
    border:2px solid #83C5E6;
    border-top:none;
    box-shadow:5px 5px 10px #666;
}
#inner_nav_container.show_inner_nav, .inner_nav_container.show_inner_nav{display:block;}


Solution :

The typical way to do this is to position the tab element over the sub element, so as to cover up that section of the border. However, the use of box-shadow complicates this.

One way is to add another element inside the root element, so that the root element can still cast the shadow, but the element inside is positioned above. See my code below, for a basic example.

Working Example:

.icon {
    width: 50px;
    height: 50px;
    position: relative;
    /*Create the shape for the shadow.*/
    border: 5px solid #83C5E6;
    box-shadow: 5px 5px 10px #666;
}
.icon-content {
    background: #fff;
    position: relative;
    /*Move back over the border.*/
    top: -5px;
    left: -5px;
    /*Make tall enough to cover the top border.*/
    width: 50px;
    height: 55px;
    /*Add border, except on the bottom.*/
    border: 5px solid #83C5E6;
    border-bottom: 0;
    /*Position up a layer.*/
    z-index: 1;
}
.nav {
    position: absolute;
    left: -5px;
    top: 100%;
    width: 400px;
    padding: 1em;
    background: #fff;
    border: 5px solid #83C5E6;
    box-shadow: 5px 5px 10px #666;
}
<div class="icon">
    <div class="icon-content">
        
    </div>
    <div class="nav">
        <div class="item">Home</div>
    </div>
</div>


    CSS Howto..

    How can i make it through using bootstrap grid?

    How to avoid display block for a particular div element using css

    CSS : How to have an input field auto adjusting its width

    How to resize all div images to a particular size?

    How to make this css readable?

    how to display a list inline using HTML and CSS

    How come one jquery script cant effect another jquery script

    How to make a rectangle mask with css

    Jquery: Show/hide menu with single button

    Vertical alignment in css of multiple elements (How to achieve this layout)

    How to control the appearance of a widget on client web sites CSS

    How to input block of text next to Font Awesome icon in CSS?

    How to combine jQuery animate with css3 properties without using css transitions?

    How to slow down the last few frames in a CSS sprite animation?

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    How to make slide down menu to slide up?

    How to make a GWT-like CaptionPanel manually

    How is CSS linked to [closed]

    How to Add a Vertical Line inside a texbox using html and css

    How to make all the rows of a table the same height as the biggest one

    How to make certain text not selectable with CSS [duplicate]

    How can I reduce the amount of vertical space between lines of text using CSS?

    how do i get images to display in a rows like this using php and css?

    How to add a box shadow to a table tr element upon hover? [duplicate]

    How to import the css file by media queries by condition [duplicate]

    How to fill an HTML form with CSS?

    How to get Sub Menu to right align using CSS

    How to align horizontally nav bar in css?

    Showing Text When Hovering Over an Image Link

    More CSS woes: how to stack divs inside another div, and have them all behave?