如何创造边界鸿沟错觉

Question

这就是我试图创造的幻觉：

​

​

注意，我的设计人员希望在div中间切断边框，这是我需要知道的。我不认为与z索引重叠将工作，因为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

这样做的典型方法是将tab元素放置在子元素上，以便覆盖边框的这一部分。然而，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>

​