title: Responsive Slanted Tabs
body: <p>I am trying to create slanted tabs similar to the image shown below:
  <a href="https://i.stack.imgur.com/NzN4L.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NzN4L.jpg" alt="enter image description here"></a></p>
  
  <p>but I am facing the following issues:</p>
  
  <ul>
  <li>The tabs are not occupying the complete container width</li>
  <li>The tabs are breaking at other viewports(tablet and mobile) into different lines.</li>
  </ul>
  
  <p>Here is the code I have worked till now,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slant-tabs {
    border: solid 2px black;
  }
  
  .slant-tabs li {
    float: left;
    background: #cccccc;
    padding-bottom: 0px
  }
  
  .slant-tabs li:not(:first-child) a:before {
    content: '';
    position: absolute;
    border: 20px solid #cccccc;
    border-left-color: transparent;
    border-top-color: transparent;
    right: 100%;
    top: 0;
  }
  
  .slant-tabs li:not(:last-child) {
    margin-right: 45px;
  }
  
  .slant-tabs li:not(:last-child) a:after {
    content: '';
    position: absolute;
    border: 20px solid #cccccc;
    border-right-color: transparent;
    border-bottom-color: transparent;
    left: 100%;
    top: 0;
  }
  
  .slant-tabs li a {
    text-decoration: none;
    line-height: 40px;
    padding: 0 8px !important;
  }
  
  .slant-tabs li a:hover {
    background-color: #cccccc;
  }
  
  .slant-tabs li.active a {
    background-color: #cccccc;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="container"&gt;
    &lt;div class="slant-tabs"&gt;
      &lt;ul class="nav"&gt;
        &lt;li class="active"&gt;
          &lt;a href="#description" data-toggle="tab"&gt;
            &lt;span&gt;Description&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#specification" data-toggle="tab"&gt;
            &lt;span&gt;Specification&lt;/span&gt;
  
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#avail" data-toggle="tab"&gt;
            &lt;span&gt;Availacoes&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab-content clearfix"&gt;
        &lt;div class="tab-pane active" id="description"&gt;
          &lt;h3&gt;Content's background color is the same for the tab&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="specification"&gt;
          &lt;h3&gt;We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab
          &lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="avail"&gt;
          &lt;h3&gt;We applied clearfix to the tab-content to rid of the gap between the tab and the content&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please me with above issues</p>