css - 使用 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>

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