制作一个形状为 Bootstrap 的导航栏

Question

目前我正在尝试使用 bootstrap

制作形状导航栏

目前这是我的片段

<div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <style>
          </style>
          <style>
            #nav-brand-bg{
              background-color: red;
              width: 100px;
              height: 100px;
              position: relative;
            }
          </style>
          <div id="nav-brand-bg"></div>
            <a class="navbar-brand" href="index.html">
            <img src="http://smarti-oc.dev/image/templates/smarti-new-logo.png" alt="">
          </a>
          <a class="navbar-brand" href="index.html">
            <img src="http://smarti-oc.dev/image/templates/malaysia_resize.png" alt="">
          </a>
      </div>

有没有制作这个的钥匙或线索？非常感谢大家

Answer 1

我要尝试...

    #nav-brand-bg {
      background-color: red;
      width: 100px;
      height: 100px;
      position: relative;
    }
    
    #navwrap {
      position: absolute;
      width: 90%;
    }
    
    #trapezoid {
      border-top: 100px solid black;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      -webkit-transform: skew(-27deg);
      -moz-transform: skew(-27deg);
      -o-transform: skew(-27deg);
      height: 0;
      width: 100px;
      left: -25px;
      position: relative;
    }
    
    #bar {
      width: 100%;
      background-color: black;
      height: 40px;
      position: absolute;
      top: 30px;
    }

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <div id="nav-brand-bg"></div>
  <div id="navwrap">

    <div id="trapezoid">

    </div>
    <div id="bar">

    </div>
  </div>

这使用了不同的方法，但是我看不到你的图片，这看起来像你想要的吗？

制作一个形状为 Bootstrap 的导航栏

Make a navbar shaped with Bootstrap

css

user-interface

frontend

twitter-bootstrap