我目前正在为网站构建一个形状相当有趣的导航。每个菜单项需要的形状如下图所示:
最终的导航看起来像这个的扩展版本:
我认为在 CSS 中制作这些形状会是一个有趣的实验。其中一种箭头形状的 CSS 和 HTML 位于此处:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
每个导航项都应用了一个负偏移量(我在演示中省略了),因为它被渲染以使它们彼此齐平。
我正在使用 Javascript 处理翻转和状态。
我的问题是让导航一直延伸到整个页面的宽度。目前我必须将导航容器设置为更大的宽度以容纳所有内容。
我已经尝试将溢出设置为隐藏,但最后一项正在下降一个级别,而不是继续进行并且只是结束结束。
我在这里举了一个例子 - http://jsfiddle.net/spacebeers/S7hzu/1/
红色边框有 overflow: hidden;
而蓝色没有。]
我的问题是:如何让所有框都 float 在一条填充包含 div 宽度的行中,而不让它们下降一个级别。
谢谢
最佳答案
关于html - 有趣的 CSS 形状导航(人字形),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9036841/