Css Verwandeln die Kanten

Question

Guten Morgen alle schief, Ich möchte die Kanten in meinem Menü machen Skew ähnlich diese:

ich die lifirst child und last-child Pseudo-Klasse CSS zu setzen versucht .. mein Code: http://www.bootply.com/9sOm7siHNT

Wie wird es implementiert?

Answer 1

Anstatt zu Ihrem UL Tag zu geben, geben Sie diese Hintergrundfarbe zu Ihren li Tags.

.main_menu .navbar-header {} .main_menu .navbar-toggle { 
 
    border: 1px solid #fff; 
 
} 
 
.main_menu .navbar-toggle .icon-bar { 
 
    background-color: #fff; 
 
} 
 
.main_menu .navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    vertical-align: top; 
 
} 
 
.main_menu .navbar-nav li { 
 
    background-color: #000; 
 
    transform: skew(-20deg); 
 
    /* SKEW */ 
 
    -webkit-transition: 0.3s; 
 
    -moz-transition: 0.3s; 
 
    -o-transition: 0.3s; 
 
    transition: 0.3s; 
 
    position: relative; 
 
    z-index: 99; 
 
} 
 
.main_menu .navbar .navbar-nav li:first-child:before { 
 
    left: -13px; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #000; 
 
    width: 26px; 
 
    height: 34px; 
 
    position: absolute; 
 
    transform: skew(-20deg); 
 
} 
 
.main_menu .navbar-nav li a { 
 
    font-size: 15px; 
 
    color: #fff; 
 
    font-family: 'Open Sans', sans-serif; 
 
    padding: 7px 12px; 
 
    transform: skew(20deg); 
 
} 
 
.main_menu .navbar-nav li:after { 
 
    content: '|'; 
 
    position: absolute; 
 
    color: #333; 
 
    left: 0; 
 
    top: 5px; 
 
    transform: skew(20deg); 
 
    vertical-align: middle; 
 
    z-index: -999; 
 
    -webkit-transition: 0.1s; 
 
    -moz-transition: 0.1s; 
 
    -o-transition: 0.1s; 
 
    transition: 0.1s; 
 
} 
 
/*.main_menu .navbar-nav li:first-child {` 
 
\t transform: skew(-20deg); 
 
\t background-color: #000; 
 
}*/ 
 

 
.main_menu .navbar-nav .active, 
 
.main_menu .navbar-nav li:hover, 
 
.main_menu .nav>li:focus { 
 
    background-color: #067bbe; 
 
} 
 
.main_menu .navbar-nav li:hover:after, 
 
.main_menu .navbar-nav li:hover+li:after { 
 
    content: ''; 
 
} 
 
.main_menu .nav>li>a:hover, 
 
.main_menu .nav>li>a:focus { 
 
    background-color: transparent; 
 
} 
 
.main_menu .navbar .navbar-collapse { 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="main_menu"> 
 
    <nav class="navbar navbar_main"> 
 
    <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="main_menu"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">ХРОНОЛОГИЯ <span class="sr-only">(current)</span></a> 
 
      </li> 
 
      <li><a href="#">ПРОИЗВОДСТВО</a> 
 
      </li> 
 
      <li><a href="#">БРЕНДЫ</a> 
 
      </li> 
 
      <li><a href="#">ВАКАНСИИ</a> 
 
      </li> 
 
      <li><a href="#">ОТЗЫВЫ</a> 
 
      </li> 
 
      <li><a href="#">КОНТАКТЫ</a> 
 
      </li> 
 
      <li><a href="#">FASHION БЛОГ</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
    </nav> 
 
</div>