菜單項上的CSS

Question

我的設計人員在構建HTML元素時爲我提供了這些元素。

一切都很好，直到我LI標籤上的模糊不平的邊界。特別是只有五里物品的那個。

如果有人能告訴我用SASS/CSS實現的最好方法，那就太棒了！看看提供的鏈接。其餘的造型都很好，只是不規則大小的小小邊框。我想要的效果是把它作爲一個流體佈局，所以當你把6號李標記出無序列表從圖A跳轉到圖B.

我的HTML到目前爲止，

<div class="full-screen-nav"> 
    <div class="container main-nav"> 
    <div class="col-xs-12"> 
     <ul class="menu"> 
      <li class="menu_item"><a href="#clickme"><span class="menu_itemText">Products</span></a></li> 
      <li class="menu_item"><a href="#"><span class="menu_itemText">Learn</span></a></li> 
      <li class="menu_item"><a href="#"><span class="menu_itemText">Manage</span></a></li> 
      <li class="menu_item"><a href="#"><span class="menu_itemText">Advice</span></a></li> 
      <li class="menu_item"><a href="#"><span class="menu_itemText">News</span></a></li> 
      <li class="menu_item"><a href="#"><span class="menu_itemText">Retirement</span></a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

和我的SCSS

// Universal Styles for Full Page nav elements 
.full-screen-nav { 
    background-color: $slate; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
    z-index: 2; 
    color: #fff; 

    ul { 
     margin: 0px 0px 0px 0px; 
     padding: 0px 0px 0px 0px; 

     li { 
      list-style-type: none; 
      padding: 0px 0px 0px 0px; 
      margin: 0px 0px 0px 0px; 
     } 
    } 

    .menu { 
     font-size: 0; 
     padding: 0; 
     margin: 0; 

     .menu_item { 
      font-size: 10pt; 
      width: 33%; 
      display: inline-block; 
      color: #FFF; 
      text-align: center; 
      border-right: 1px solid rgba(255, 255, 255, 0.3); 
      border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
      position: relative; 

      .menu_itemText { 
       padding: 100px 0px 10px 0px; 
       display: inline-block; 
      } 

      &.menu_item:nth-child(3n){ 
       border-right: 0; 
      } 

      &.menu_item:nth-child(n+4){ 
       border-bottom: 0; 
      } 

      &.menu_item:nth-child(4):after, &.menu_item:nth-child(5):after { 
       content: ""; 
       color: red; 
       position: absolute; 
       right: -16px; 
       background: $slate; 
       padding: 16px; 
       top: -16px; 
      } 
     } 
    } 
    } 

    //Unique Navigation 
    .unique-nav { 
    .container { 
     background-color: transparent; 
    } 

    h2 { 
     background: url(#{$assets}/icons/chevron.svg) no-repeat 0 0; 
    } 

    .menu { 
     li { 
      background-repeat: no-repeat; 
      background-size: 70px; 
      background-position: center 20px; 

      &:first-child {background-image: url(#{$assets}/menu/products.svg) } 
      &:nth-child(2) {background-image: url(#{$assets}/menu/products.svg) } 
      &:nth-child(3) {background-image: url(#{$assets}/menu/manage.svg) } 
      &:nth-child(4) {background-image: url(#{$assets}/menu/investments.svg) } 
      &:nth-child(5) {background-image: url(#{$assets}/menu/news.png) } 
      &:nth-child(6) {background-image: url(#{$assets}/menu/retirement.svg) } 
     } 
    } 
    } 

謝謝！

Answer 1

OK，這看起來相當混亂......但爲什麼不試試這個：

table { 
    border-collapse: separate; 
    border-spacing: 5px; 
} 

Answer 2

這裏是一個解決方案，它是流動的，只使用CSS。 我爲每個角使用了4個span元素。更有用的應該是使用僞元素：before和：after作爲頂角和底部的一個span元素，同樣使用2個僞元素：before和：after作爲底角。

body { 
 
    background-color: rgb(30, 30, 30); 
 
    color: rgb(200, 200, 200); 
 
    font-family: Sans-Serif; 
 
} 
 

 
.iconbox { 
 
    width: 80%; 
 
    max-width: 480px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    
 
    display: -webkit-flex; 
 
    
 
    display: -ms-flexbox; 
 
    
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    -webkit-flex-wrap: wrap; 
 
     -ms-flex-wrap: wrap; 
 
      flex-wrap: wrap; 
 
    -webkit-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
     -ms-flex-pack: start; 
 
      justify-content: flex-start; 
 
    -webkit-align-content: flex-start; 
 
     -ms-flex-line-pack: start; 
 
      align-content: flex-start; 
 
    -webkit-box-align: start; 
 
    -webkit-align-items: flex-start; 
 
     -ms-flex-align: start; 
 
      align-items: flex-start; 
 
    overflow: hidden; 
 
} 
 

 
.iconbox li { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    -webkit-flex-wrap: wrap; 
 
     -ms-flex-wrap: wrap; 
 
      flex-wrap: wrap; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-align-content: center; 
 
     -ms-flex-line-pack: center; 
 
      align-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 1 100px; 
 
     -ms-flex: 1 1 100px; 
 
      flex: 1 1 100px; 
 
    height: 100px; 
 
    background-color: rgb(30, 30, 30); 
 
    color: #FFFFFF; 
 
    color: rgba(255, 255, 255, .9); 
 
    border: 1px solid #FFFFFF; 
 
    border: 1px solid rgba(255, 255, 255, .3); 
 
    margin: -2px; 
 
} 
 

 
.iconbox li .edges-top-right { 
 
    display: block; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    top: -3px; 
 
    right: -2px; 
 
    background-color: rgb(30, 30, 30); 
 
} 
 

 
.iconbox li .edges-top-left { 
 
    display: block; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    top: -3px; 
 
    left: -2px; 
 
    background-color: rgb(30, 30, 30); 
 
} 
 

 
.iconbox li .edges-bottom-right { 
 
    display: block; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    bottom: -2px; 
 
    right: -2px; 
 
    background-color: rgb(30, 30, 30); 
 
    z-index: 100; 
 
} 
 

 
.iconbox li .edges-bottom-left { 
 
    display: block; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    bottom: -2px; 
 
    left: -2px; 
 
    background-color: rgb(30, 30, 30); 
 
    z-index: 100; 
 
}

<ul class="iconbox"> 
 
    <li> 
 
    <span class="edges-top-right"></span> 
 
    <span class="edges-top-left"></span> 
 
    Products 
 
    <span class="edges-bottom-right"></span> 
 
    <span class="edges-bottom-left"></span> 
 
    </li> 
 
    <li> 
 
    <span class="edges-top-right"></span> 
 
    <span class="edges-top-left"></span> 
 
    Learn 
 
    <span class="edges-bottom-right"></span> 
 
    <span class="edges-bottom-left"></span> 
 
    </li> 
 
    <li> 
 
    <span class="edges-top-right"></span> 
 
    <span class="edges-top-left"></span> 
 
    Manage 
 
    <span class="edges-bottom-right"></span> 
 
    <span class="edges-bottom-left"></span> 
 
    </li> 
 
    <li> 
 
    <span class="edges-top-right"></span> 
 
    <span class="edges-top-left"></span> 
 
    Advice 
 
    <span class="edges-bottom-right"></span> 
 
    <span class="edges-bottom-left"></span> 
 
    </li> 
 
    <li> 
 
    <span class="edges-top-right"></span> 
 
    <span class="edges-top-left"></span> 
 
    News 
 
    <span class="edges-bottom-right"></span> 
 
    <span class="edges-bottom-left"></span> 
 
    </li> 
 
    <li> 
 
    <span class="edges-top-right"></span> 
 
    <span class="edges-top-left"></span> 
 
    Retirement 
 
    <span class="edges-bottom-right"></span> 
 
    <span class="edges-bottom-left"></span> 
 
    </li> 
 
    <li> 
 
    <span class="edges-top-right"></span> 
 
    <span class="edges-top-left"></span> 
 
    Investments 
 
    <span class="edges-bottom-right"></span> 
 
    <span class="edges-bottom-left"></span> 
 
    </li> 
 
    <li> 
 
    <span class="edges-top-right"></span> 
 
    <span class="edges-top-left"></span> 
 
    Specials 
 
    <span class="edges-bottom-right"></span> 
 
    <span class="edges-bottom-left"></span> 
 
    </li> 
 
</ul>

CODEPEN EXAMPLE
請與瀏覽器寬度玩玩看的流體效果。