html - 如何创建边界间隙错觉

Question

这是我试图创造的错觉:

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

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