菜单项上的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
请与浏览器宽度玩玩看的流体效果。