有趣的 CSS 形状导航（V 形）答案

【问题标题】：Interesting CSS shape navigation (chevrons)有趣的 CSS 形状导航（V 形）
【发布时间】：2012-02-20 15:38:17
【问题描述】：

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

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

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

每个导航项都应用了一个负偏移量（我在演示中省略了），因为它被渲染以使它们彼此齐平。

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

我的问题是让导航一直延伸到页面的宽度。目前我必须将导航容器设置为更大的宽度以容纳所有内容。

我尝试将溢出设置为隐藏，但最后一项正在下降一个级别，而不是继续进行并且只是将结尾切断。

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

红色边框有overflow: hidden;，蓝色没有。]

我的问题是：我怎样才能让盒子全部漂浮在一条填充包含 div 宽度的行中，而不会使它们下降一个级别。

谢谢

【问题讨论】：

必须支持IE7及以下吗？

标签： html css shape shapes css-shapes

【解决方案1】：

为每个箭头添加负边距：

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

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

【讨论】：

抱歉，为了更清楚一点，我留下了空白。如果您在示例中添加另一个框，它会再次下降。
我明白了。遗憾的是，你不能只使用 CSS。使用 CSS3，这是完全可能的，但使用 CSS2 则不行。你需要一些 JS 解决方案。除非您对溢出时裁剪掉一些元素感到满意？
你有我可以看的 CSS3 示例吗？
这里：jsfiddle.net/S7hzu/11。主要是display: box和box-flex: 1。

【解决方案2】：

弹性盒

你可以使用这个例子

https://codepen.io/WBear/pen/pPYrwo

它适用于新浏览器，以支持旧浏览器需要进行一些更改。

HTML：

<div class="content">
<div class="as1">
  <a href="#">NAV</a>
  </div>
 <div class="as2">
   <a href="#">NAV</a>
   </div>
  <div class="as3">
   <a href="#">NAV</a>
   </div>
  </div>

CSS：

 .content {
  margin-top: 10px;
  width: 100%;
  display: inline-flex;

}

.as1, .as2, .as3 {
  height: 70px;
  min-width: 8%;
  max-width: 100%;
  background-color: black;
  position: relative;
  display: inline-flex;
  text-align: center;
  flex-wrap: wrap;
  flex-grow: 1;

}

.as1 a, .as2 a, .as3 a {
  text-decoration: none;
  display: inline-flex;
  color: white;
  margin: auto;
  font-size: 14pt;

}

.as1:after {
  content: "";
  position: absolute;
  right: 4px;
  border-top: 35px solid transparent;
  border-left: 25px solid black;
  border-bottom: 35px solid transparent;
  z-index: 2;

}

.as2 {
  background-color: grey;
  margin-left: -29px;


}
.as2:after {
  content: "";
  position: absolute;
  right: 4px;
  border-top: 35px solid transparent;
  border-left: 25px solid grey;
  border-bottom: 35px solid transparent;
  z-index: 3;

}

.as3 {
  background-color: #A9A9A9;
  margin-left: -29px;
}

【讨论】：