メニュー項目のCSS

Question

私のデザイナーはHTML要素を作成する際にこれらの要素を私に与えてくれました。

LIタグのかすかな不揃いの境界に達するまでは、すべていいです。特に5つの唯一のアイテムを持つもの。

誰かが私にSASS/CSSで達成する最良の方法を示すことができたら、それはすばらしいことでしょう！提供されたリンクを見てください。スタイリングの残りの部分は細かいもので、サイズが不揃いの小さな小さな境界線です。私の所望の効果が

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

、あなたが順不同リストのうち、第六のliタグを取るときに、それは今のところ私のHTML B.

を把握するための図Aからジャンプし、流体レイアウトとしてそれを持っていることでしたと私の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を使用して1つの解決策です。 各コーナーに4つのスパン要素を使用します。もっと便利なのは、擬似要素を使用することです：上端はbeforeと：after、下端は一つのspan要素です。

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
流体効果を確認するために、ブラウザの幅と遊ぶしてください。