ブートストラップ

Question

が現在使用して形のナビゲーションバーをしようとしてイムと形のナビゲーションバーを作成し、ブートストラップ任意のキー、または手がかりにはあり

は現在、これは私のスニペット

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

これは別の方法を使用しますが、私はあなたの画像を見ることができなかったとして、あなたのためにこれは見えますか？