有趣的CSS形狀導航（雪佛龍）

我正在爲一個網站構建一個相當有趣的形狀導航。每個菜單項必須是形狀如下圖所示：有趣的CSS形狀導航（雪佛龍）

enter image description here

最終的淨資產值將看起來像一個擴展版本的這個：

enter image description here

我認爲這將是一個有趣的實驗在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;和藍色不]

我的問題是：我怎樣才能獲得箱子ALL浮點在一行中填充包含div的寬度，而不會降低關卡的寬度。

感謝

來源

2012-01-27 SpaceBeers

你有支持IE7和下？ – 2012-01-27 16:43:02

我會盡可能去IE7。 – SpaceBeers 2012-01-27 16:44:28

添加陰性切緣每個箭頭：

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

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

來源

2012-01-27 16:44:45 Blender

對不起，我留下了空白，讓它更清晰。如果您在示例中添加另一個框，它會再次下降。 – SpaceBeers 2012-01-27 16:48:35

我明白了。很遺憾，你不能只用CSS。使用CSS3，這完全有可能，但不能用於CSS2。你需要一些JS解決方案。除非你滿意地將一些元素在溢出時切掉？ – Blender 2012-01-27 16:51:45

你有我可以看的CSS3例子嗎？ – SpaceBeers 2012-01-27 21:24:39

Flexbox的

你可以用這個例子

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; 
}

來源

2017-05-25 07:13:29 WBear

有趣的CSS形狀導航（雪佛龍）

回答

相關問題