有趣的CSS形状导航（V形） [英] Interesting CSS shape navigation (chevrons)

问题描述

目前，我正在为一个网站构建一个非常有趣的导航。每个菜单项需要的形状如下所示：

最终导航将看起来像这样的扩展版本：

< img src =https://i.stack.imgur.com/aKXUl.jpgalt =我认为这将是一个有趣的实验在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实心透明; 
 border-right：5px solid #FFFFFF; 
 float：left; 
光标：指针; 
} 
 
 .arrowBulkOn {
 height：20px; 
背景：#FFFFFF; 
 padding：2px 5px 0px 0px; 
 float：left; 
颜色：＃000000; 
 line-height：14pt; 
光标：指针; 
} 
 
 .arrowStartOn {
 font-size：0px; line-height：0％; width：0px; 
 border-top：11px纯透明; 
 border-bottom：11px透明; 
 border-left：5px solid #FFFFFF; 
 border-right：0px纯透明; 
 float：left; 
光标：指针; 
} 
 
< div id =navclass =navArrowstyle =position：relative;> 
< div class =arrowEndOnid =nav>& nbsp;< / div> 
< div class =arrowBulkOnid =nav> NAV< / div> 
< div class =arrowStartOnid =nav>& nbsp;< / div> 
< / div> 
  

每个导航项都有一个负偏移量应用于它（我已经不在演示中）因为它呈现出来让他们全部齐平。

我使用Javascript处理翻转和状态。

我的问题是让nav伸展一直跨越页面的宽度。目前，我必须将nav容器设置为更大的宽度以容纳所有内容。

我已经尝试将溢出设置为隐藏，但最后一个项目正在下降一个级别而不是继续，只是结束切断。

我在这里设置了一个例子 - http://jsfiddle.net/spacebeers/S7hzu/1/

红色border overflow：hidden; ，蓝色不是。]

我的问题是：我怎样才能得到所有的浮动框中的行，填充包含div的宽度，而不会降低关卡的水平。

谢谢

解决方案

为每个箭头添加一个负边距：

  .navArrow {
 float：left; 
 margin-left：-8px; 
} 
  

演示： http://jsfiddle.net/S7hzu/2/

I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:

The final nav will look like an extended version of this:

I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:

    .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">&nbsp;</div>
        <div class="arrowBulkOn" id="nav">NAV</div>
        <div class="arrowStartOn" id="nav">&nbsp;</div>
    </div>

Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.

I'm handling the rollovers and on states with Javascript.

My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.

I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.

I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/

The red border has overflow: hidden; and the blue doesn't.]

My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.

Thanks

解决方案

Add a negative margin to each arrow:

.navArrow {
  float: left;
  margin-left: -8px;
}

Demo: http://jsfiddle.net/S7hzu/2/

这篇关于有趣的CSS形状导航（V形）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！