Question

嘿我正在尝试在HTML CSS中重新创建这个PSD（http://www.psdchat.com/resources/templates/freebie-hexal-portfolio-template/），但需要一些帮助来确定如何在主菜单下进行下划线。

到目前为止，我有： 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内联和下面的div可能会起作用，但我很确定这是一种非常低效的方法。

非常感谢任何帮助。感谢

请注意我使用sass和jade。

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

如果其他人正在尝试这样做并且需要分割线我也添加到.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

非常感谢你的帮助！

顶部导航下方的下划线，使用向下箭头分割

2 个答案: