下の矢印の下に下線を付けて下矢印を付けて分割します

Question

こんにちはこのPSD（http://www.psdchat.com/resources/templates/freebie-hexal-portfolio-template/）をHTML CSSで再作成しようとしていますが、メインメニューの下線をどのようにするかを理解する助けが必要です。

これまでのところ、私が持っている： http://codepen.io/jasonm4130/pen/BKrwpE

nav.navbar.navbar-default 
    .container-fluid 
    .navbar-header 
     button(type="button", class="navbar-toggle collapsed", data-toggle="collapse", data-target="#navbar-collapse-1", aria-expanded="false") 
     span.sr-only Toggle Navigation 
     span.icon-bar 
     span.icon-bar 
     span.icon-bar 
     a(class="navbar-brand navbar-brand-hidden", href="#") Nikora's Photography 
    #navbar-collapse-1.collapse.navbar-collapse 
     ul.nav.navbar-nav 
     li 
      a(href="#") Portfolio 
     li 
      a(href="#") About 
     li 
      a(class="navbar-brand", href="#") Nikora's Photography 
     li 
      a(href="#") Blog 
     li 
      a(href="#") Get in Touch 
.menu-underline-container 
    .menu-underline 
    .menu-underline-seperator 
    .menu-underline 

`//ヘッダーのカスタムスタイル

.navbar.navbar-default 
    background-color: #323232 
    border: none 
    border-radius: 0px 
    &:after 
    content: "" 
    border-bottom: 2px solid 

    .navbar-brand.navbar-brand-hidden 
    color: #fff 
    @media (min-width: 769px) 
     display: none 
    ul.nav.navbar-nav 
    float: none 
    display: inline-block 

    li 
     a 
     color: white 

    .navbar-brand 
     margin: 0 auto 
     text-align: center 
     &:after 
     content: "" 
     width: 0 
     border-top: 53px solid #323232 
     border-left: 90px solid transparent 
     border-right: 90px solid transparent 
     position: absolute 
     bottom: -53px 
     left: 50% 
     margin-left: -90px 
     @media (max-width: 768px) 
     display: none 

    .navbar-collapse 
    text-align: center 

.menu-underline-container 
    width: 90% 
    margin: 1px auto 
    .menu-underline 
    display: inline-flex 
    height: 1px 
    width: auto 
    border-bottom: 1px solid #e4e9eb 
    @media (max-width: 1200px) 
     width: 40% 
    .menu-underline-seperator 
    width: 52px 

私は私の下線かもしれないと同じ枠で下インライン3つのdivを作成していることを考えていますしかし、私はこれが本当に効率の悪い方法であると確信しています。

ご協力いただければ幸いです。ありがとうございます

ご注意私はサスとヒスイを使用しています。

Answer 1

だから私の答えが追加され、この

div#navbar-collapse-1:after //<--Check background, width, top, height with your PSD 
    content: ""; 
    display: block; 
    height: 1px; 
    background: #000; 
    position: relative; 
    width:100%; 
    top: 10px; 

そして

.navbar.navbar-default ul.nav.navbar-nav .navbar-brand:after 
    content: ""; 
    width: 0; 
    border-top: 53px solid #323232; 
    border-left: 90px solid transparent; 
    border-right: 90px solid transparent; 
    position: absolute; 
    bottom: -53px; 
    left: 50%; 
    margin-left: -90px; 
    z-index: 2;//<---This 

これは、すべてのコンパイル済みのCSSに追加されます

誰がこれをやろうとしているとするラインを必要としているだけの場合

Answer 2

split。私も.navbarブランドに追加しました。これは、白い三角形を元の黒い三角形より大きくし、その下に下線を「分ける」ようにします。

&:before 
    content: "" 
    width: 0 
    border-top: 64px solid #fff 
    border-left: 110px solid transparent 
    border-right: 110px solid transparent 
    position: absolute 
    bottom: -75px 
    left: 50% 
    margin-left: -110px 
    z-index: 2 

ありがとうございました！