Question

是否有人知道任何可以实现标签矩形外观的CSS技巧，如下图所示。

显然，使用一个div无法实现这一点，但是，任何人都可以提出一种更好的方法，而不是将一个div重叠在另一个div上以在边界中形成间隙吗？

这是我目前的解决方案，但我觉得可能会更好：

HTML：

<div id="handle"></div>
<div id="menu"></div>

CSS（忽略颜色和定位等）：

#handle {
    width: 90px;
    height: 20px;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

#menu {
    width: 600px;
    height: 100px;
    border: 1px solid #666;
    margin-top: 19px; /* Notice it is one pixel higher then the bottom of the #handle, this covers the top border where the handle is */
}

如果有错误请不要纠正上面的CSS，我还没有测试过。纯粹是为了展示我目前实现这个目标的方法

任何评论都非常感谢

Tabbed Rectangle

更新

这是菜单的HTML：

<nav id="global-nav">
    <ul>
        <li id="homNav"><a href="#" title="Home"></a></li>
        <li id="masNav"><a href="#" title="#">#</a>
            <!-- This is where the submenu starts -->
            <div class="handle"></div>
            <div class="subMenu">
                <!-- Content Here -->
            </div>
            <!-- This is where the submenu ends -->
        </li>
        <li id="shiNav"><a href="#" title="#">#</a>
            <div class="handle"></div>
            <div class="subMenu">
                <!-- Content Here -->
            </div>
        </li>
        <li id="repNav"><a href="#" title="#">#</a>
            <div class="handle"></div>
            <div class="subMenu">
                <!-- Content Here -->
            </div>
        </li>
        <li id="setNav"><a href="#" title="#">#</a>
            <div class="handle"></div>
            <div class="subMenu">
                <!-- Content Here -->
            </div>
        </li>
    </ul>
</nav>

这是菜单的CSS（我还没有包括子菜单css）：

/* Navigation */
#global-nav {position:absolute;width:460px;height:27px;left:15px;top:43px;}

#global-nav ul {margin:0;padding:0;list-style-type:none;}
#global-nav ul li {position:relative;display:block;width:92px;height:27px;float:left;padding:0;margin-left:8px;z-index:10;cursor:pointer;background-image:url("http://beta.example.net/_images/_global/sprite.png");background-position:-173px -32px;}
#global-nav ul li:hover {background-position:-173px -59px;}
#global-nav ul li:active {background-position:-173px -86px;}
#global-nav ul li a {display:block;width:92px;height:27px;line-height:27px;text-align:center;color:#fff;font-size:12px;text-shadow:#666 0 -1px 0;}
#global-nav ul li:hover a {color:#666;text-shadow:#fff 0 1px 0;}
#global-nav ul li:active a {color:#666;text-shadow:none;}

/* Set styles for specific navigation buttons */
#homNav {width:47px !important;margin-left:0 !important;margin-right:12px;background-position:-126px -32px !important;}
#homNav a {width:47px !important;}
#homNav:hover {background-position:-126px -59px !important;}
#homNav:active {background-position:-126px -86px !important;}

/* Set hovers of sub menu buttons to active images */
#masNav:hover,
#shiNav:hover,
#repNav:hover,
#setNav:hover
{background-position:-173px -86px !important;}

Answer 1

仔细观察后我得出结论，我原来的覆盖边框的方法是实现此标签式菜单的最佳方法。

HTML：

<nav id="global-nav">
    <ul>
        <li id="homNav"><a href="#" title="Home"></a></li>
        <li id="masNav"><a href="#" title="#">#</a>
            <div class="subMenuHandle horizontal-sprite">
                <div class="bg-noise"></div>
            </div>
            <div class="subMenu horizontal-sprite">
                <div class="bg-noise"></div>
            </div>
        </li>
        <li id="shiNav"><a href="#" title="#">#</a>
            <div class="subMenuHandle horizontal-sprite">
                <div class="bg-noise"></div>
            </div>
            <div class="subMenu horizontal-sprite">
                <div class="bg-noise"></div>
            </div>
        </li>
        <li id="repNav"><a href="#" title="#">#</a>
            <div class="subMenuHandle horizontal-sprite">
                <div class="bg-noise"></div>
            </div>
            <div class="subMenu horizontal-sprite">
                <div class="bg-noise"></div>
            </div>
        </li>
        <li id="setNav"><a href="#" title="#">#</a>
            <div class="subMenuHandle horizontal-sprite">
                <div class="bg-noise"></div>
            </div>
            <div class="subMenu horizontal-sprite">
                <div class="bg-noise"></div>
            </div>
        </li>
    </ul>
</nav>

CSS（抱歉压缩，只是我的格式化方式）：

/* Navigation */
#global-nav {position:absolute;width:460px;height:27px;left:15px;top:43px;}

#global-nav ul {margin:0;padding:0;list-style-type:none;}
#global-nav ul li {position:relative;display:block;width:92px;height:27px;float:left;padding:0;margin-left:8px;z-index:10;background-image:url("http://beta.example.net/_images/_global/sprite.png");background-position:-173px -32px;}
#global-nav ul li:hover {background-position:-173px -59px;}
#global-nav ul li:active {background-position:-173px -86px;}
#global-nav ul li a {display:block;width:92px;height:27px;line-height:27px;text-align:center;color:#fff;font-size:12px;text-shadow:#666 0 -1px 0;}
#global-nav ul li:hover a {color:#666;text-shadow:#fff 0 1px 0;}
#global-nav ul li:active a {color:#666;text-shadow:none;}

/* Set styles for specific navigation buttons */
#homNav {width:47px !important;margin-left:0 !important;margin-right:12px;background-position:-126px -32px !important;}
#homNav a {width:47px !important;}
#homNav:hover {background-position:-126px -59px !important;}
#homNav:active {background-position:-126px -86px !important;}

/* Set hovers of sub menu buttons to active images */
#masNav:hover,
#shiNav:hover,
#repNav:hover,
#setNav:hover
{background-position:-173px -86px !important;}

/* Set the sub menu handles */
#global-nav .subMenuHandle {position:relative;display:none;width:90px;height:12px;margin-top:-1px;border-left:1px solid #666;border-right:1px solid #666;z-index:1000;background-color:#fff;background-repeat:repeat-x;}

/* Set the sub menu container */
#global-nav .subMenu {position:relative;display:none;margin-top:-1px;width:910px;height:180px;border:1px solid #666;z-index:999;background-color:#ddd;background-position:0 -12px;background-repeat:repeat-x;}

/* Set the menu hovers to show sub menus */
#global-nav ul li:hover .subMenuHandle,
#global-nav ul li:hover .subMenu
{display:block;}

/* Set the sub menu container positions */
#masNav .subMenu {margin-left:-83px;}
#shiNav .subMenu {margin-left:-183px;}
#repNav .subMenu {margin-left:-283px;}
#setNav .subMenu {margin-left:-383px;}

/* Set the noise in the menus */
.bg-noise {position:absolute;left:0;top:0;width:100%;height:100%;background:url("https://www.beta.net/_images/_global/bg-noise.png") repeat;}

使用CSS创建选项卡式矩形

1 个答案: