如何创建边界间隙错觉

Question

这是我试图创造的错觉：

请注意，我的设计师希望在div的中间切断边框，这个是我需要知道如何做的。我不认为与z-index的重叠将起作用，因为HTML的布局方式。

这是HTML代码，其结构可能无法更改以获得最大的设备兼容性，但是，如果添加元素是解决方案，我相信可能会这样做：

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

这是当前基本的CSS代码：

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

Answer 1

执行此操作的典型方法是将制表符元素放在子元素上，以便覆盖边框的该部分。但是，使用box-shadow会使这一点变得复杂。

一种方法是在根元素中添加另一个元素，以便根元素仍然可以投射阴影，但内部元素位于上方。有关基本示例，请参阅下面的代码。

工作示例：

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